diff --git a/common/src/app/common/types/shape/interactions.cljc b/common/src/app/common/types/shape/interactions.cljc
index 127ebee57f..6b06b68897 100644
--- a/common/src/app/common/types/shape/interactions.cljc
+++ b/common/src/app/common/types/shape/interactions.cljc
@@ -139,8 +139,8 @@
[:map {:title "OpenOverlayInteraction"}
[:action-type [:= :open-overlay]]
[:event-type [::sm/one-of event-types]]
- [:overlay-position ::gpt/point]
- [:overlay-pos-type [::sm/one-of overlay-positioning-types]]
+ [:overlay-position {:optional true} ::gpt/point]
+ [:overlay-pos-type {:optional true} [::sm/one-of overlay-positioning-types]]
[:destination {:optional true} [:maybe ::sm/uuid]]
[:close-click-outside {:optional true} :boolean]
[:background-overlay {:optional true} :boolean]
@@ -151,8 +151,8 @@
[:map {:title "ToggleOverlayInteraction"}
[:action-type [:= :toggle-overlay]]
[:event-type [::sm/one-of event-types]]
- [:overlay-position ::gpt/point]
- [:overlay-pos-type [::sm/one-of overlay-positioning-types]]
+ [:overlay-position {:optional true} ::gpt/point]
+ [:overlay-pos-type {:optional true} [::sm/one-of overlay-positioning-types]]
[:destination {:optional true} [:maybe ::sm/uuid]]
[:close-click-outside {:optional true} :boolean]
[:background-overlay {:optional true} :boolean]
diff --git a/docs/img/styling/background-blur.webp b/docs/img/styling/background-blur.webp
new file mode 100644
index 0000000000..3c7a0859de
Binary files /dev/null and b/docs/img/styling/background-blur.webp differ
diff --git a/docs/package.json b/docs/package.json
index cf16fae313..299d497e48 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -27,16 +27,16 @@
"@11ty/eleventy": "^3.1.6",
"@11ty/eleventy-navigation": "^1.0.5",
"@11ty/eleventy-plugin-rss": "^3.0.0",
- "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
+ "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.2",
"@tigersway/eleventy-plugin-ancestry": "^1.0.3",
"@types/markdown-it": "14.1.2",
"elasticlunr": "^0.9.5",
- "eleventy-plugin-metagen": "^1.8.3",
+ "eleventy-plugin-metagen": "^1.8.4",
"eleventy-plugin-nesting-toc": "^1.3.0",
- "eleventy-plugin-youtube-embed": "^1.10.2",
- "luxon": "^3.4.4",
- "markdown-it": "^14.1.0",
- "markdown-it-anchor": "^9.0.1",
+ "eleventy-plugin-youtube-embed": "^1.13.2",
+ "luxon": "^3.7.2",
+ "markdown-it": "^14.2.0",
+ "markdown-it-anchor": "^9.2.0",
"markdown-it-plantuml": "^1.4.1"
},
"packageManager": "pnpm@11.9.0+sha512.bd682d5d03fe525ef7c9fd6780c6884d1e756ac4c9c9fe00c538782824310dcf90e3ddc4f53835f06dfaebd5085e41855e0bcbb3b60de2ac5bbab89e5036f03b"
diff --git a/docs/pnpm-lock.yaml b/docs/pnpm-lock.yaml
index 2ea471ca0c..d32be57396 100644
--- a/docs/pnpm-lock.yaml
+++ b/docs/pnpm-lock.yaml
@@ -18,7 +18,7 @@ importers:
specifier: ^3.0.0
version: 3.0.0
'@11ty/eleventy-plugin-syntaxhighlight':
- specifier: ^5.0.0
+ specifier: ^5.0.2
version: 5.0.2
'@tigersway/eleventy-plugin-ancestry':
specifier: ^1.0.3
@@ -30,22 +30,22 @@ importers:
specifier: ^0.9.5
version: 0.9.5
eleventy-plugin-metagen:
- specifier: ^1.8.3
+ specifier: ^1.8.4
version: 1.8.4
eleventy-plugin-nesting-toc:
specifier: ^1.3.0
version: 1.3.0
eleventy-plugin-youtube-embed:
- specifier: ^1.10.2
+ specifier: ^1.13.2
version: 1.13.2
luxon:
- specifier: ^3.4.4
+ specifier: ^3.7.2
version: 3.7.2
markdown-it:
- specifier: ^14.1.0
+ specifier: ^14.2.0
version: 14.2.0
markdown-it-anchor:
- specifier: ^9.0.1
+ specifier: ^9.2.0
version: 9.2.0(@types/markdown-it@14.1.2)(markdown-it@14.2.0)
markdown-it-plantuml:
specifier: ^1.4.1
@@ -436,8 +436,8 @@ packages:
resolution: {integrity: sha512-gXkz5+KN7HrG0Q5UGqSMO2qB9AsbEeyLP54kF1YrMsIxmu+g4BdB7rflReZTSTZGpfj8wywu6pfPBCylPIzGQA==}
engines: {node: '>=6.0'}
- js-yaml@3.14.2:
- resolution: {integrity: sha512-PMSmkqxr106Xa156c2M265Z+FTrPl+oxd/rgOQy2tijQeK5TxQ43psO1ZCwhVOSdnn+RzkzlRz/eY4BgJBYVpg==}
+ js-yaml@3.15.0:
+ resolution: {integrity: sha512-ttBQIIQPDeLjpPOohtUdXuXUVoA2uIB6fEH9HyJ7234s5mBJ5wTx20njxplLZQgLaOfpmPQA7X2t5AX6tIPbog==}
hasBin: true
js-yaml@4.2.0:
@@ -692,8 +692,8 @@ packages:
uc.micro@2.1.0:
resolution: {integrity: sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==}
- undici@7.27.2:
- resolution: {integrity: sha512-uZsKNuzQxDMUY6M3pIMvy5tvlGmtq8XJ2oLAkfRKGNu+1VQAIvLy2xIVG5ATZl5wDXl/tddByAWCizRbOme+TA==}
+ undici@7.28.0:
+ resolution: {integrity: sha512-cRZYrTDwWznlnRiPjggAGxZXanty6M8RV1ff8Wm4LWXBp7/IG8v5DnOm74DtUBp9OONpK75YlPnIjQqX0dBDtA==}
engines: {node: '>=20.18.1'}
unpipe@1.0.0:
@@ -943,7 +943,7 @@ snapshots:
parse5: 7.3.0
parse5-htmlparser2-tree-adapter: 7.1.0
parse5-parser-stream: 7.1.2
- undici: 7.27.2
+ undici: 7.28.0
whatwg-mimetype: 4.0.0
chokidar@3.6.0:
@@ -1126,7 +1126,7 @@ snapshots:
gray-matter@4.0.3:
dependencies:
- js-yaml: 3.14.2
+ js-yaml: 3.15.0
kind-of: 6.0.3
section-matter: 1.0.0
strip-bom-string: 1.0.0
@@ -1188,7 +1188,7 @@ snapshots:
iso-639-1@3.1.5: {}
- js-yaml@3.14.2:
+ js-yaml@3.15.0:
dependencies:
argparse: 1.0.10
esprima: 4.0.1
@@ -1410,7 +1410,7 @@ snapshots:
uc.micro@2.1.0: {}
- undici@7.27.2: {}
+ undici@7.28.0: {}
unpipe@1.0.0: {}
diff --git a/docs/pnpm-workspace.yaml b/docs/pnpm-workspace.yaml
index e69de29bb2..79b7d49256 100644
--- a/docs/pnpm-workspace.yaml
+++ b/docs/pnpm-workspace.yaml
@@ -0,0 +1,3 @@
+minimumReleaseAgeExclude:
+ - undici@7.28.0
+ - js-yaml@3.15.0
diff --git a/docs/user-guide/design-systems/design-tokens.njk b/docs/user-guide/design-systems/design-tokens.njk
index 390959a2ed..53f58cdb99 100644
--- a/docs/user-guide/design-systems/design-tokens.njk
+++ b/docs/user-guide/design-systems/design-tokens.njk
@@ -31,6 +31,7 @@ desc: Learn how to create, manage and apply Penpot Design Tokens using W3C DTCG
Description: You can also choose to add a description to your token.Once you have named the token and assigned it a value, click Save to store the token and start referencing it.
+Token value fields suggest existing tokens as you type. Pick a suggestion to insert a reference, or keep typing a custom value.
Referencing tokens into values (aliases)
When assigning a value to a token, you can reference existing tokens - these are called aliases at the DTCG Glossary .
@@ -111,7 +112,7 @@ desc: Learn how to create, manage and apply Penpot Design Tokens using W3C DTCG
This ensures the spacing is at least 8, even if the base token is smaller.
Editing a token
-Tokens can be edited by right-clicking the token and selecting Edit token . This will allow you to change the tokens name, value and description. Once the changes are made, click Save .
+Tokens can be edited by right-clicking the token and selecting Edit token . This will allow you to change the tokens name, value and description. Value fields offer the same token suggestions as when creating a token. Once the changes are made, click Save .
@@ -141,12 +142,15 @@ desc: Learn how to create, manage and apply Penpot Design Tokens using W3C DTCG
Size and position: width, height, x, yRotation and border radius Layout spacing: gaps, paddings, margins, min and max widths and heightsTypography: letter spacing and line heightTypography: letter spacing, line height, and composite typography tokens on text layersStroke width Shadows: x, y, blur, spreadBlur amountClick the token control on a field to open a list of applicable tokens from your active sets and themes. Select a token to apply it; a token pill shows the bound token. Use the pill menu to detach the token when you need a custom value again.
+On text layers, the Typography section shows a composite typography token row when one is applied. Open the token list from the section header to pick or switch tokens without going to the Tokens panel. Hover a token name to see its resolved values (font family, size, weight, and the rest).
+When you multi-select text layers that share typography tokens, the Typography section shows the applied token. If the selection mixes different tokens, detach them from there or apply a new one to the whole selection.
+Typography options in the dropdown list show resolved values on hover, so you can tell styles apart before applying them.
When a numeric field has a token applied, drag-to-change is disabled for that field. Edit the token or detach it first.
Apply a Typography token
A Typography composite token can be applied to a full text layer to set all typography properties at once. This lets you manage complete text styles using a single token instead of combining multiple individual ones.
+Apply it from the Tokens panel, or from the Typography section in the Design sidebar when a text layer is selected.
When applying a Typography composite token to a layer, any previously applied Typography composite token or style will be detached. The same happens in reverse. Only one of them can be active at a time.
Shadow
diff --git a/docs/user-guide/designing/color-stroke.njk b/docs/user-guide/designing/color-stroke.njk
index d6d227fac3..012b45b264 100644
--- a/docs/user-guide/designing/color-stroke.njk
+++ b/docs/user-guide/designing/color-stroke.njk
@@ -57,7 +57,7 @@ desc: Style your designs with Penpot's options! Learn about color fills, gradien
Color type - Solid, gradient, or image.Sliders - Easily manage settings like brightness, saturation or opacity.Values - Set precise color values. Available formats depend on the selected color model.Libraries - Switch between recent colors and libraries.Libraries - Switch between recent colors and libraries. Color tokens in a library can be shown as a grid or a list. Use the list view when you need to scan names or work with long token lists.Color palette - A quick launcher of the palette with the selected library.Style - solid, dotted, dashed, mixedVisibility - show or hide the stroke without removing itWhen the style is set to dashed , two extra fields appear to control the dash and gap length in pixels.
You can add as many strokes as you want to the same layer.
Esc
Blur
-You can set a blur for each and every layer at Penpot.
-
+You can add blur effects to layers from the Design sidebar. Penpot supports two types:
+
+ Layer blur blurs the layer content itself.Background blur blurs whatever sits behind the layer. Use it for frosted-glass or depth effects. Background blur requires the WebGL renderer to be enabled.
+Background blur is not included in exported files yet (PNG, SVG, PDF, and others). The exporter still uses the legacy SVG renderer, so the effect only shows in the workspace and View mode. Export support is a current priority and will land in an upcoming release.
+
+ Background blur affects the layers behind the shape, not the shape itself.
+
+Click + in the Blur section to add an effect. You can apply both types on the same layer. Use the type selector to switch between them, the eye icon to show or hide an effect without removing it, and the value field to set the blur amount.
+Applying many or large blur values can affect Penpot’s performance, as it requires a lot from the browser.
diff --git a/docs/user-guide/prototyping-testing/prototyping.njk b/docs/user-guide/prototyping-testing/prototyping.njk
index 7be44ec22e..5adaba4b39 100644
--- a/docs/user-guide/prototyping-testing/prototyping.njk
+++ b/docs/user-guide/prototyping-testing/prototyping.njk
@@ -42,6 +42,10 @@ desc: This Penpot user guide explains how to prototype interactions, connect boa
10) Flow indicator and launcher
+Interaction settings
+When a layer with interactions is selected, the Prototype sidebar lists every connection attached to it. From there you can change the trigger, action, destination, animation, and other options.
+Destination dropdowns include a search field. Type to filter boards on the current page when your file has many screens.
+
Interaction triggers
,
+ /// Whether we've already forced a GPU flush+submit before a tile-atlas
+ /// snapshot this render. The first snapshot of a pass can otherwise capture
+ /// a tile before its text glyph uploads complete (blank first/center tile).
+ /// One explicit flush warms the submit path for the rest of the pass.
+ pub tile_atlas_flushed: bool,
}
pub struct InteractiveDragCrop {
@@ -592,6 +597,7 @@ impl RenderState {
interactive_target_seeded: false,
preserve_target_during_render: false,
backbuffer_crop_cache: HashMap::default(),
+ tile_atlas_flushed: false,
})
}
@@ -1020,6 +1026,10 @@ impl RenderState {
.as_ref()
.ok_or(Error::CriticalError("Current tile not found".to_string()))?;
+ if self.tile_atlas_flushed {
+ crate::get_gpu_state().context.flush_and_submit();
+ }
+
self.surfaces.draw_current_tile_into_tile_atlas(
&self.tile_viewbox,
¤t_tile,
@@ -1386,7 +1396,7 @@ impl RenderState {
}
match &shape.shape_type {
- Type::SVGRaw(sr) => {
+ Type::SVGRaw(_) => {
if let Some(svg_transform) = shape.svg_transform() {
matrix.pre_concat(&svg_transform);
}
@@ -1398,21 +1408,13 @@ impl RenderState {
if let Some(svg) = shape.svg.as_ref() {
svg.render(self.surfaces.canvas_and_mark_dirty(fills_surface_id));
} else {
- let font_manager = skia::FontMgr::from(self.fonts().font_provider().clone());
- let dom_result = skia::svg::Dom::from_str(&sr.content, font_manager);
- match dom_result {
- Ok(dom) => {
- dom.render(self.surfaces.canvas_and_mark_dirty(fills_surface_id));
- shape.to_mut().set_svg(dom);
- }
- Err(e) => {
- eprintln!("Error parsing SVG. Error: {}", e);
- }
- }
+ panic!("SVG should be available");
}
}
Type::Text(stored_text_content) => {
+ self.tile_atlas_flushed = true;
+
self.surfaces.apply_mut(surface_ids, |s| {
s.canvas().concat(&matrix);
});
@@ -1469,14 +1471,12 @@ impl RenderState {
.enumerate()
{
if stroke_kinds[i] == StrokeKind::Inner {
- let mut mask_builders = text_content.paragraph_builder_group_opaque();
let mut fill_builders =
text_content.paragraph_builder_group_from_text(None);
text::render_inner_stroke(
Some(self),
None,
&shape,
- &mut mask_builders,
stroke_paragraphs,
&mut fill_builders,
Some(strokes_surface_id),
@@ -1484,6 +1484,17 @@ impl RenderState {
text_stroke_blur_outset,
*layer_opacity,
)?;
+ } else if stroke_kinds[i] == StrokeKind::Outer {
+ text::render_outer_stroke(
+ Some(self),
+ None,
+ &shape,
+ stroke_paragraphs,
+ Some(strokes_surface_id),
+ None,
+ text_stroke_blur_outset,
+ *layer_opacity,
+ )?;
} else {
text::render_with_bounds_outset(
Some(self),
@@ -1499,6 +1510,20 @@ impl RenderState {
)?;
}
}
+
+ if shape.has_visible_strokes() && text_content.has_non_ascii() {
+ let mut emoji_builders = text_content.paragraph_builder_group_opaque();
+ let mut deco_builders =
+ text_content.paragraph_builder_group_from_text(None);
+ text::render_emoji_overlay(
+ self,
+ &shape,
+ &mut emoji_builders,
+ &mut deco_builders,
+ strokes_surface_id,
+ None,
+ );
+ }
} else {
let mut drop_shadows = shape.drop_shadow_paints();
@@ -1605,15 +1630,12 @@ impl RenderState {
.enumerate()
{
if stroke_kinds[i] == StrokeKind::Inner {
- let mut mask_builders =
- text_content.paragraph_builder_group_opaque();
let mut fill_builders =
text_content.paragraph_builder_group_from_text(None);
text::render_inner_stroke(
Some(self),
None,
&shape,
- &mut mask_builders,
stroke_paragraphs,
&mut fill_builders,
Some(strokes_surface_id),
@@ -1621,6 +1643,17 @@ impl RenderState {
text_stroke_blur_outset,
*layer_opacity,
)?;
+ } else if stroke_kinds[i] == StrokeKind::Outer {
+ text::render_outer_stroke(
+ Some(self),
+ None,
+ &shape,
+ stroke_paragraphs,
+ Some(strokes_surface_id),
+ blur_filter.as_ref(),
+ text_stroke_blur_outset,
+ *layer_opacity,
+ )?;
} else {
text::render_with_bounds_outset(
Some(self),
@@ -1637,6 +1670,20 @@ impl RenderState {
}
}
+ if shape.has_visible_strokes() && text_content.has_non_ascii() {
+ let mut emoji_builders = text_content.paragraph_builder_group_opaque();
+ let mut deco_builders =
+ text_content.paragraph_builder_group_from_text(None);
+ text::render_emoji_overlay(
+ self,
+ &shape,
+ &mut emoji_builders,
+ &mut deco_builders,
+ strokes_surface_id,
+ blur_filter.as_ref(),
+ );
+ }
+
// 5. Stroke inner shadows
shadows::render_text_shadows(
self,
@@ -3572,6 +3619,7 @@ impl RenderState {
// a resumed-from-yield case rather than a genuinely
// empty tile.
self.current_tile_had_shapes = false;
+ self.tile_atlas_flushed = false;
let viewer_masked_pass = self.viewer_masked_pass();
diff --git a/render-wasm/src/render/shadows.rs b/render-wasm/src/render/shadows.rs
index 6965f16ed0..c3de172ad8 100644
--- a/render-wasm/src/render/shadows.rs
+++ b/render-wasm/src/render/shadows.rs
@@ -165,13 +165,11 @@ pub fn render_text_shadows(
for (i, stroke_paragraphs) in stroke_paragraphs_group.iter_mut().enumerate() {
if i < stroke_kinds.len() && stroke_kinds[i] == StrokeKind::Inner {
- let mut mask_builders = text_content.paragraph_builder_group_opaque();
let mut fill_builders = text_content.paragraph_builder_group_from_text(Some(true));
text::render_inner_stroke(
None,
Some(canvas),
shape,
- &mut mask_builders,
stroke_paragraphs,
&mut fill_builders,
surface_id,
@@ -179,6 +177,17 @@ pub fn render_text_shadows(
0.0,
None,
)?;
+ } else if i < stroke_kinds.len() && stroke_kinds[i] == StrokeKind::Outer {
+ text::render_outer_stroke(
+ None,
+ Some(canvas),
+ shape,
+ stroke_paragraphs,
+ surface_id,
+ blur_filter.as_ref(),
+ 0.0,
+ None,
+ )?;
} else {
text::render(
None,
diff --git a/render-wasm/src/render/text.rs b/render-wasm/src/render/text.rs
index 4f2d521179..d972e69813 100644
--- a/render-wasm/src/render/text.rs
+++ b/render-wasm/src/render/text.rs
@@ -95,8 +95,6 @@ fn get_text_stroke_paints(
match stroke.kind {
StrokeKind::Inner => {
- // Just the stroke paint — mask+SrcIn+DstOver layering is handled
- // by render_inner_stroke_on_canvas.
let mut paint = skia::Paint::default();
paint.set_style(skia::PaintStyle::Stroke);
paint.set_anti_alias(true);
@@ -120,17 +118,14 @@ fn get_text_stroke_paints(
StrokeKind::Outer => {
let mut paint = skia::Paint::default();
paint.set_style(skia::PaintStyle::Stroke);
- paint.set_blend_mode(skia::BlendMode::DstOver);
paint.set_anti_alias(true);
paint.set_stroke_width(stroke.width * 2.0);
- fill_for_paint(&mut paint);
- paints.push(paint);
-
- let mut paint = skia::Paint::default();
- paint.set_style(skia::PaintStyle::Fill);
- paint.set_blend_mode(skia::BlendMode::Clear);
- paint.set_color(skia::Color::TRANSPARENT);
- paint.set_anti_alias(true);
+ if remove_stroke_alpha {
+ paint.set_color(skia::Color::BLACK);
+ paint.set_alpha(255);
+ } else {
+ fill_for_paint(&mut paint);
+ }
paints.push(paint);
}
}
@@ -408,10 +403,10 @@ fn paint_text_with_emoji_overlay(
overlay_emoji: bool,
) {
let text_content = shape.get_text_content();
- let layout_info =
+ let mut layout_info =
calculate_text_layout_data(shape, text_content, paragraph_builder_groups, true);
- for para in &layout_info.paragraphs {
+ for para in &mut layout_info.paragraphs {
para.paragraph.paint(canvas, (para.x, para.y));
if overlay_emoji {
@@ -431,11 +426,48 @@ fn paint_text_with_emoji_overlay(
}
}
+fn paragraph_has_emoji(paragraph: &mut skia::textlayout::Paragraph) -> bool {
+ let line_bounds: Vec<(usize, usize)> = paragraph
+ .get_line_metrics()
+ .iter()
+ .map(|l| (l.start_index, l.end_index))
+ .collect();
+ line_bounds
+ .into_iter()
+ .any(|(start, end)| !line_emoji_ranges(paragraph, start, end).is_empty())
+}
+
+fn line_emoji_ranges(
+ paragraph: &mut skia::textlayout::Paragraph,
+ line_start: usize,
+ line_end: usize,
+) -> Vec<(usize, usize)> {
+ let mut merged: Vec<(usize, usize)> = Vec::new();
+ for idx in line_start..line_end {
+ let font = paragraph.get_font_at_utf16_offset(idx);
+ let normalized = font
+ .typeface()
+ .family_name()
+ .to_lowercase()
+ .replace(' ', "-");
+ if !normalized.contains(DEFAULT_EMOJI_FONT) {
+ continue;
+ }
+
+ match merged.last_mut() {
+ Some(last) if last.1 == idx => last.1 = idx + 1,
+ _ => merged.push((idx, idx + 1)),
+ }
+ }
+
+ merged
+}
+
/// Rasterizes color emoji runs as bitmap overlays. Skia's PDF backend can't
/// embed COLR/CBDT color glyphs, so each emoji is drawn to a raster surface and
/// blitted; `paragraph.paint()` already wrote placeholder glyphs (keeps text
/// selectable).
-fn paint_emoji_overlay(canvas: &Canvas, para: &ParagraphLayout) {
+fn paint_emoji_overlay(canvas: &Canvas, para: &mut ParagraphLayout) {
let line_metrics = para.paragraph.get_line_metrics();
// Rasterize at TARGET_DPI relative to the emoji's on-page size (72 user
@@ -450,45 +482,18 @@ fn paint_emoji_overlay(canvas: &Canvas, para: &ParagraphLayout) {
let sy = (ctm.skew_x().powi(2) + ctm.scale_y().powi(2)).sqrt();
let output_scale = sx.max(sy).max(1.0);
- for line in &line_metrics {
- let style_runs = line.get_style_metrics(line.start_index..line.end_index);
+ let line_bounds: Vec<(usize, usize)> = line_metrics
+ .iter()
+ .map(|l| (l.start_index, l.end_index))
+ .collect();
+ drop(line_metrics);
- // Build a list of (start, end, is_emoji) for each style run.
- let mut run_info: Vec<(usize, usize, bool)> = Vec::new();
- for (i, (start_idx, _style_metric)) in style_runs.iter().enumerate() {
- let end_idx = style_runs.get(i + 1).map_or(line.end_index, |next| next.0);
- if *start_idx >= end_idx {
- continue;
- }
-
- let font = para.paragraph.get_font_at(*start_idx);
- let family_name = font.typeface().family_name();
-
- let normalized = family_name.to_lowercase().replace(' ', "-");
- let is_emoji = normalized.contains(DEFAULT_EMOJI_FONT);
- run_info.push((*start_idx, end_idx, is_emoji));
- }
-
- // Merge consecutive emoji runs: Skia splits ZWJ sequences (e.g. 👩🏿🚀)
- // per codepoint, but `get_rects_for_range` needs the full cluster range.
- let mut merged_emoji_ranges: Vec<(usize, usize)> = Vec::new();
- for &(start, end, is_emoji) in &run_info {
- if is_emoji {
- if let Some(last) = merged_emoji_ranges.last_mut() {
- if last.1 == start {
- // Extend the previous range
- last.1 = end;
- continue;
- }
- }
- merged_emoji_ranges.push((start, end));
- }
- }
-
- for (range_start, range_end) in &merged_emoji_ranges {
+ for (line_start, line_end) in line_bounds {
+ for (range_start, range_end) in line_emoji_ranges(&mut para.paragraph, line_start, line_end)
+ {
// Get the bounding rects for this (possibly merged) emoji run
let rects = para.paragraph.get_rects_for_range(
- *range_start..*range_end,
+ range_start..range_end,
skia::textlayout::RectHeightStyle::Tight,
skia::textlayout::RectWidthStyle::Tight,
);
@@ -542,6 +547,162 @@ fn paint_emoji_overlay(canvas: &Canvas, para: &ParagraphLayout) {
}
}
+fn draw_decoration_stroke(
+ canvas: &Canvas,
+ kind: StrokeKind,
+ stroke_paint: &Paint,
+ bar: skia::Rect,
+) {
+ if kind == StrokeKind::Center {
+ canvas.draw_rect(bar, stroke_paint);
+ return;
+ }
+
+ let blend = if kind == StrokeKind::Inner {
+ skia::BlendMode::SrcIn
+ } else {
+ skia::BlendMode::SrcOut
+ };
+
+ canvas.save_layer(&SaveLayerRec::default());
+ let mut mask_paint = Paint::default();
+ mask_paint.set_color(skia::Color::BLACK);
+ mask_paint.set_anti_alias(true);
+ canvas.draw_rect(bar, &mask_paint);
+
+ let mut blend_paint = Paint::default();
+ blend_paint.set_blend_mode(blend);
+ canvas.save_layer(&SaveLayerRec::default().paint(&blend_paint));
+ canvas.draw_rect(bar, stroke_paint);
+ canvas.restore();
+ canvas.restore();
+}
+
+fn paint_emoji_opaque(
+ canvas: &Canvas,
+ emoji_para: &mut ParagraphLayout,
+ deco_para: &ParagraphLayout,
+ stroke_decos: &[(StrokeKind, Paint)],
+) {
+ let line_bounds: Vec<(usize, usize)> = emoji_para
+ .paragraph
+ .get_line_metrics()
+ .iter()
+ .map(|l| (l.start_index, l.end_index))
+ .collect();
+
+ let mut clip = skia::PathBuilder::new();
+ let mut has_emoji = false;
+ for (line_start, line_end) in line_bounds {
+ for (range_start, range_end) in
+ line_emoji_ranges(&mut emoji_para.paragraph, line_start, line_end)
+ {
+ let rects = emoji_para.paragraph.get_rects_for_range(
+ range_start..range_end,
+ skia::textlayout::RectHeightStyle::Tight,
+ skia::textlayout::RectWidthStyle::Tight,
+ );
+
+ for text_box in &rects {
+ let r = &text_box.rect;
+ if r.width() <= 0.0 || r.height() <= 0.0 {
+ continue;
+ }
+ clip.add_rect(
+ skia::Rect::from_xywh(
+ emoji_para.x + r.left,
+ emoji_para.y + r.top,
+ r.width(),
+ r.height(),
+ ),
+ None,
+ None,
+ );
+ has_emoji = true;
+ }
+ }
+ }
+
+ if !has_emoji {
+ return;
+ }
+
+ canvas.save();
+ canvas.clip_path(&clip.detach(), skia::ClipOp::Intersect, true);
+ emoji_para
+ .paragraph
+ .paint(canvas, (emoji_para.x, emoji_para.y));
+
+ for deco in &deco_para.decorations {
+ draw_text_decorations(
+ canvas,
+ &deco.text_style,
+ Some(deco.y),
+ deco.thickness,
+ deco.left,
+ deco.width,
+ );
+ let r = decoration_rect(deco.y, deco.thickness, deco.left, deco.width);
+ for (kind, paint) in stroke_decos {
+ draw_decoration_stroke(canvas, *kind, paint, r);
+ }
+ }
+ canvas.restore();
+}
+
+pub fn render_emoji_overlay(
+ render_state: &mut RenderState,
+ shape: &Shape,
+ emoji_builders: &mut [Vec],
+ deco_builders: &mut [Vec],
+ surface_id: SurfaceId,
+ blur: Option<&ImageFilter>,
+) {
+ let text_content = shape.get_text_content();
+ let mut emoji_layout = calculate_text_layout_data(shape, text_content, emoji_builders, true);
+
+ if !emoji_layout
+ .paragraphs
+ .iter_mut()
+ .any(|para| paragraph_has_emoji(&mut para.paragraph))
+ {
+ return;
+ }
+
+ let selrect = shape.selrect();
+ let mut stroke_decos: Vec<(StrokeKind, Paint)> = Vec::new();
+ for stroke in shape.visible_strokes().rev() {
+ let (paints, opacity) = get_text_stroke_paints(stroke, &selrect, false);
+ for mut paint in paints {
+ if let Some(opacity) = opacity {
+ paint.set_alpha_f(opacity);
+ }
+ stroke_decos.push((stroke.kind, paint));
+ }
+ }
+
+ let deco_layout = calculate_text_layout_data(shape, text_content, deco_builders, true);
+ let canvas = render_state.surfaces.canvas_and_mark_dirty(surface_id);
+
+ if let Some(blur_filter) = blur {
+ let mut blur_paint = Paint::default();
+ blur_paint.set_image_filter(blur_filter.clone());
+ canvas.save_layer(&SaveLayerRec::default().paint(&blur_paint));
+ }
+
+ for (emoji_para, deco_para) in emoji_layout
+ .paragraphs
+ .iter_mut()
+ .zip(deco_layout.paragraphs.iter())
+ {
+ paint_emoji_opaque(canvas, emoji_para, deco_para, &stroke_decos);
+ }
+
+ if blur.is_some() {
+ canvas.restore();
+ }
+}
+
fn draw_text(
canvas: &Canvas,
shape: &Shape,
@@ -561,27 +722,22 @@ fn draw_text(
paint_text_with_emoji_overlay(canvas, shape, paragraph_builder_groups, overlay_emoji);
}
-/// Renders an inner stroke using mask + SrcIn + DstOver layer structure.
+/// Renders a text stroke masked to the glyph shape.
///
-/// Layer structure:
-/// saveLayer() — outer layer
-/// saveLayer() — mask group (isolation)
-/// paint mask — opaque fill as clip mask
-/// saveLayer(SrcIn) — clips stroke to mask shape
-/// paint stroke
-/// restore
-/// restore
-/// saveLayer(DstOver) — fill behind the stroke
-/// paint fill
-/// restore
-/// restore
+/// `stroke_mask_blend` selects which side of the glyph the stroke keeps:
+/// `SrcIn` for inner strokes (stroke clipped to the glyph), `SrcOut` for outer
+/// strokes (stroke kept outside the glyph). When `fill_builders` is provided
+/// (inner strokes) the fill is composited with `DstOver` *inside* the masked
+/// layer so its anti-aliased edge aligns with the stroke — no seam at the glyph
+/// boundary. Outer strokes pass `None` (fill is drawn separately).
#[allow(clippy::too_many_arguments)]
-fn render_inner_stroke_on_canvas(
+fn render_masked_stroke_on_canvas(
canvas: &Canvas,
shape: &Shape,
mask_builders: &mut [Vec],
stroke_builders: &mut [Vec],
- fill_builders: &mut [Vec],
+ fill_builders: Option<&mut [Vec]>,
+ stroke_mask_blend: skia::BlendMode,
blur: Option<&ImageFilter>,
layer_opacity: Option,
) {
@@ -591,61 +747,59 @@ fn render_inner_stroke_on_canvas(
canvas.save_layer(&SaveLayerRec::default().paint(&blur_paint));
}
- // Opacity layer wraps the entire composition
if let Some(opacity) = layer_opacity {
let mut opacity_paint = Paint::default();
opacity_paint.set_alpha_f(opacity);
canvas.save_layer(&SaveLayerRec::default().paint(&opacity_paint));
}
- // Outer layer
canvas.save_layer(&SaveLayerRec::default());
- // Mask group layer (isolates mask from parent surface content)
canvas.save_layer(&SaveLayerRec::default());
- // Draw opaque mask (full alpha text shape)
paint_text(canvas, shape, mask_builders);
- // SrcIn layer — only keeps stroke pixels where mask has alpha
- let mut src_in_paint = Paint::default();
- src_in_paint.set_blend_mode(skia::BlendMode::SrcIn);
- canvas.save_layer(&SaveLayerRec::default().paint(&src_in_paint));
+ let mut stroke_paint = Paint::default();
+ stroke_paint.set_blend_mode(stroke_mask_blend);
+ canvas.save_layer(&SaveLayerRec::default().paint(&stroke_paint));
- // Draw stroke
paint_text(canvas, shape, stroke_builders);
- canvas.restore(); // SrcIn layer
+ // Fill with DstOver behind the stroke, inside the masked layer so the fill's
+ // anti-aliased edge aligns with the stroke (no seam at the glyph edge).
+ // Outer strokes have no fill here (`None`).
+ if let Some(fill_builders) = fill_builders {
+ let mut dst_over_paint = Paint::default();
+ dst_over_paint.set_blend_mode(skia::BlendMode::DstOver);
+ canvas.save_layer(&SaveLayerRec::default().paint(&dst_over_paint));
+
+ paint_text(canvas, shape, fill_builders);
+
+ canvas.restore(); // DstOver layer
+ }
+
+ canvas.restore(); // SrcIn / SrcOut layer
canvas.restore(); // mask group layer
-
- // Fill with DstOver (behind the stroke result)
- let mut dst_over_paint = Paint::default();
- dst_over_paint.set_blend_mode(skia::BlendMode::DstOver);
- canvas.save_layer(&SaveLayerRec::default().paint(&dst_over_paint));
-
- paint_text(canvas, shape, fill_builders);
-
- canvas.restore(); // DstOver layer
canvas.restore(); // outer layer
if layer_opacity.is_some() {
- canvas.restore(); // opacity layer
+ canvas.restore();
}
if blur.is_some() {
- canvas.restore(); // blur layer
+ canvas.restore();
}
}
-/// Public API for rendering inner strokes with mask+SrcIn+DstOver approach.
#[allow(clippy::too_many_arguments)]
-pub fn render_inner_stroke(
+fn render_masked_stroke(
render_state: Option<&mut RenderState>,
canvas: Option<&Canvas>,
shape: &Shape,
mask_builders: &mut [Vec],
stroke_builders: &mut [Vec],
- fill_builders: &mut [Vec],
+ mut fill_builders: Option<&mut [Vec]>,
+ stroke_mask_blend: skia::BlendMode,
surface_id: Option,
blur: Option<&ImageFilter>,
stroke_bounds_outset: f32,
@@ -665,18 +819,20 @@ pub fn render_inner_stroke(
let bounds = blur_filter.compute_fast_bounds(text_bounds);
if bounds.is_finite() && bounds.width() > 0.0 && bounds.height() > 0.0 {
let blur_filter_clone = blur_filter.clone();
+ let fill_builders = &mut fill_builders;
if filters::render_with_filter_surface(
render_state,
bounds,
target_surface,
|state, temp_surface| {
let temp_canvas = state.surfaces.canvas(temp_surface);
- render_inner_stroke_on_canvas(
+ render_masked_stroke_on_canvas(
temp_canvas,
shape,
mask_builders,
stroke_builders,
- fill_builders,
+ fill_builders.as_deref_mut(),
+ stroke_mask_blend,
Some(&blur_filter_clone),
layer_opacity,
);
@@ -689,12 +845,13 @@ pub fn render_inner_stroke(
}
let canvas = render_state.surfaces.canvas_and_mark_dirty(target_surface);
- render_inner_stroke_on_canvas(
+ render_masked_stroke_on_canvas(
canvas,
shape,
mask_builders,
stroke_builders,
- fill_builders,
+ fill_builders.as_deref_mut(),
+ stroke_mask_blend,
blur,
layer_opacity,
);
@@ -702,12 +859,13 @@ pub fn render_inner_stroke(
}
if let Some(canvas) = canvas {
- render_inner_stroke_on_canvas(
+ render_masked_stroke_on_canvas(
canvas,
shape,
mask_builders,
stroke_builders,
fill_builders,
+ stroke_mask_blend,
blur,
layer_opacity,
);
@@ -715,6 +873,70 @@ pub fn render_inner_stroke(
Ok(())
}
+#[allow(clippy::too_many_arguments)]
+pub fn render_inner_stroke(
+ render_state: Option<&mut RenderState>,
+ canvas: Option<&Canvas>,
+ shape: &Shape,
+ stroke_builders: &mut [Vec],
+ fill_builders: &mut [Vec],
+ surface_id: Option,
+ blur: Option<&ImageFilter>,
+ stroke_bounds_outset: f32,
+ layer_opacity: Option,
+) -> Result<()> {
+ let mut mask_builders = shape.get_text_content().paragraph_builder_group_opaque();
+ render_masked_stroke(
+ render_state,
+ canvas,
+ shape,
+ &mut mask_builders,
+ stroke_builders,
+ Some(fill_builders),
+ skia::BlendMode::SrcIn,
+ surface_id,
+ blur,
+ stroke_bounds_outset,
+ layer_opacity,
+ )
+}
+
+#[allow(clippy::too_many_arguments)]
+pub fn render_outer_stroke(
+ render_state: Option<&mut RenderState>,
+ canvas: Option<&Canvas>,
+ shape: &Shape,
+ stroke_builders: &mut [Vec],
+ surface_id: Option,
+ blur: Option<&ImageFilter>,
+ stroke_bounds_outset: f32,
+ layer_opacity: Option,
+) -> Result<()> {
+ let mut mask_builders = shape.get_text_content().paragraph_builder_group_opaque();
+ render_masked_stroke(
+ render_state,
+ canvas,
+ shape,
+ &mut mask_builders,
+ stroke_builders,
+ None,
+ skia::BlendMode::SrcOut,
+ surface_id,
+ blur,
+ stroke_bounds_outset,
+ layer_opacity,
+ )
+}
+
+fn decoration_rect(y: f32, thickness: f32, text_left: f32, text_width: f32) -> skia_safe::Rect {
+ skia_safe::Rect::new(
+ text_left,
+ y - thickness / 2.0,
+ text_left + text_width,
+ y + thickness / 2.0,
+ )
+}
+
fn draw_text_decorations(
canvas: &Canvas,
text_style: &TextStyle,
@@ -724,12 +946,7 @@ fn draw_text_decorations(
text_width: f32,
) {
if let Some(y) = y {
- let r = skia_safe::Rect::new(
- text_left,
- y - thickness / 2.0,
- text_left + text_width,
- y + thickness / 2.0,
- );
+ let r = decoration_rect(y, thickness, text_left, text_width);
let mut decoration_paint = text_style.foreground();
decoration_paint.set_anti_alias(true);
canvas.draw_rect(r, &decoration_paint);
diff --git a/render-wasm/src/render/vector.rs b/render-wasm/src/render/vector.rs
index 721a02fbc5..04d91552d9 100644
--- a/render-wasm/src/render/vector.rs
+++ b/render-wasm/src/render/vector.rs
@@ -194,14 +194,12 @@ impl ShapeRenderer for VectorRenderer<'_> {
for (kind, stroke_paragraphs) in &mut stroke_shadow_groups {
if *kind == StrokeKind::Inner {
// Inner stroke masked by the glyph fill (outset 0 here).
- let mut mask_builders = text_content.paragraph_builder_group_opaque();
let mut fill_builders =
text_content.paragraph_builder_group_from_text(Some(true));
text::render_inner_stroke(
None,
Some(self.canvas),
shape,
- &mut mask_builders,
stroke_paragraphs,
&mut fill_builders,
None,
@@ -209,6 +207,17 @@ impl ShapeRenderer for VectorRenderer<'_> {
0.0,
None,
)?;
+ } else if *kind == StrokeKind::Outer {
+ text::render_outer_stroke(
+ None,
+ Some(self.canvas),
+ shape,
+ stroke_paragraphs,
+ None,
+ blur_filter.as_ref(),
+ 0.0,
+ None,
+ )?;
} else {
text::render_with_bounds_outset_overlay_emoji(
self.canvas,
@@ -250,13 +259,11 @@ impl ShapeRenderer for VectorRenderer<'_> {
);
if stroke.render_kind(false) == StrokeKind::Inner {
// Inner text stroke: clip to the glyph fill, else it bleeds out.
- let mut mask_builders = text_content.paragraph_builder_group_opaque();
let mut fill_builders = text_content.paragraph_builder_group_from_text(None);
text::render_inner_stroke(
None,
Some(self.canvas),
shape,
- &mut mask_builders,
&mut stroke_paragraphs,
&mut fill_builders,
None,
@@ -264,6 +271,17 @@ impl ShapeRenderer for VectorRenderer<'_> {
stroke_blur_outset,
layer_opacity,
)?;
+ } else if stroke.render_kind(false) == StrokeKind::Outer {
+ text::render_outer_stroke(
+ None,
+ Some(self.canvas),
+ shape,
+ &mut stroke_paragraphs,
+ None,
+ blur_filter.as_ref(),
+ stroke_blur_outset,
+ layer_opacity,
+ )?;
} else {
text::render_with_bounds_outset_overlay_emoji(
self.canvas,
diff --git a/render-wasm/src/shapes.rs b/render-wasm/src/shapes.rs
index 95c704ceff..92d49c7c30 100644
--- a/render-wasm/src/shapes.rs
+++ b/render-wasm/src/shapes.rs
@@ -722,6 +722,23 @@ impl Shape {
self.invalidate_extrect();
}
+ pub fn update_svg_raw_content(&mut self, font_manager: skia::FontMgr) {
+ match &self.shape_type {
+ Type::SVGRaw(sr) => {
+ let dom_result = skia::svg::Dom::from_str(&sr.content, font_manager);
+ match dom_result {
+ Ok(dom) => {
+ self.set_svg(dom);
+ }
+ Err(e) => {
+ eprintln!("Error parsing SVG. Error: {}", e);
+ }
+ }
+ }
+ _ => panic!("Updating SVG raw content on non SVG Raw shape"),
+ }
+ }
+
pub fn set_svg_raw_content(&mut self, content: String) {
self.shape_type = Type::SVGRaw(SVGRaw::from_content(content));
}
diff --git a/render-wasm/src/shapes/text.rs b/render-wasm/src/shapes/text.rs
index 86159ac3df..1ba1381172 100644
--- a/render-wasm/src/shapes/text.rs
+++ b/render-wasm/src/shapes/text.rs
@@ -400,6 +400,13 @@ impl TextContent {
&self.paragraphs
}
+ pub fn has_non_ascii(&self) -> bool {
+ self.paragraphs
+ .iter()
+ .flat_map(|p| p.children())
+ .any(|span| !span.text.is_ascii())
+ }
+
pub fn paragraphs_mut(&mut self) -> &mut Vec {
self.content_version = self.content_version.wrapping_add(1);
&mut self.paragraphs
@@ -888,6 +895,11 @@ impl TextContent {
.copy_finite_size(result.2, default_width, default_height);
}
+ pub fn force_next_layout_update(&mut self) {
+ self.layout_width = None;
+ self.layout.cached_extrect.set(None);
+ }
+
pub fn update_layout(&mut self, selrect: Rect) -> TextContentSize {
if !self.layout.needs_update()
&& self.layout_version == self.content_version
diff --git a/render-wasm/src/wasm/text.rs b/render-wasm/src/wasm/text.rs
index c97ec81276..6e2575741f 100644
--- a/render-wasm/src/wasm/text.rs
+++ b/render-wasm/src/wasm/text.rs
@@ -370,8 +370,11 @@ pub extern "C" fn intersect_position_in_shape(
false
}
-fn update_text_layout(shape: &mut Shape) {
+fn update_text_layout(shape: &mut Shape, force: bool) {
if let Type::Text(text_content) = &mut shape.shape_type {
+ if force {
+ text_content.force_next_layout_update();
+ }
text_content.update_layout(shape.selrect);
shape.invalidate_extrect();
}
@@ -380,7 +383,7 @@ fn update_text_layout(shape: &mut Shape) {
#[no_mangle]
pub extern "C" fn update_shape_text_layout() {
with_current_shape_mut!(state, |shape: &mut Shape| {
- update_text_layout(shape);
+ update_text_layout(shape, false);
});
}
@@ -389,7 +392,18 @@ pub extern "C" fn update_shape_text_layout_for(a: u32, b: u32, c: u32, d: u32) {
with_state!(state, {
let shape_id = uuid_from_u32_quartet(a, b, c, d);
if let Some(shape) = state.shapes.get_mut(&shape_id) {
- update_text_layout(shape);
+ update_text_layout(shape, false);
+ }
+ state.touch_shape(shape_id);
+ });
+}
+
+#[no_mangle]
+pub extern "C" fn force_update_shape_text_layout_for(a: u32, b: u32, c: u32, d: u32) {
+ with_state!(state, {
+ let shape_id = uuid_from_u32_quartet(a, b, c, d);
+ if let Some(shape) = state.shapes.get_mut(&shape_id) {
+ update_text_layout(shape, true);
}
state.touch_shape(shape_id);
});
@@ -528,6 +532,7 @@ ExtraBold Italic
diff --git a/docs/user-guide/designing/layers.njk b/docs/user-guide/designing/layers.njk
index 474432b66c..2c55a7a7ca 100644
--- a/docs/user-guide/designing/layers.njk
+++ b/docs/user-guide/designing/layers.njk
@@ -461,8 +461,18 @@ You can choose to edit individual nodes or create new ones. Press Esc
+