3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-01 16:11:40 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ Text grow width/height

Browse source
This commit is contained in:
alonso.torres 2025-05-06 17:23:46 +02:00 • committed by Alonso Torres
parent 6b300d516b
commit 568af52ebc
13 changed files with 381 additions and 106 deletions
Download patch file Download diff file Expand all files Collapse all files

108
frontend/src/app/main/data/workspace/texts.cljs
View file

@ -11,6 +11,7 @@
[app.common.data :as d]
[app.common.data.macros :as dm]
[app.common.files.helpers :as cfh]
[app.common.geom.matrix :as gmt]
[app.common.geom.point :as gpt]
[app.common.geom.shapes :as gsh]
[app.common.math :as mth]
@ -28,6 +29,7 @@
[app.main.features :as features]
[app.main.fonts :as fonts]
[app.main.router :as rt]
[app.render-wasm.api :as wasm.api]
[app.util.text-editor :as ted]
[app.util.text.content.styles :as styles]
[app.util.timers :as ts]
@ -47,6 +49,45 @@
(declare v2-update-text-shape-content)
(declare v2-update-text-editor-styles)
(defn resize-wasm-text-modifiers
([shape]
(resize-wasm-text-modifiers shape (:content shape)))
([{:keys [id points selrect] :as shape} content]
(wasm.api/use-shape id)
(wasm.api/set-shape-text-content content)
(let [dimension (wasm.api/text-dimensions)
resize-v
(gpt/point
(/ (:width dimension) (-> selrect :width))
(/ (:height dimension) (-> selrect :height)))
origin (first points)]
{id
{:modifiers
(ctm/resize-modifiers
resize-v
origin
(:transform shape (gmt/matrix))
(:transform-inverse shape (gmt/matrix)))}})))
(defn resize-wasm-text
[id]
(ptk/reify ::resize-wasm-text
ptk/WatchEvent
(watch [_ state _]
(let [objects (dsh/lookup-page-objects state)
shape (get objects id)]
(rx/of (dwm/apply-wasm-modifiers (resize-wasm-text-modifiers shape)))))))
(defn resize-wasm-text-all
[ids]
(ptk/reify ::resize-wasm-text-all
ptk/WatchEvent
(watch [_ _ _]
(->> (rx/from ids)
(rx/map resize-wasm-text)))))
;; -- Editor
(defn update-editor
@ -98,6 +139,28 @@
new-shape? (nil? (:content shape))]
(if (ted/content-has-text? content)
(if (features/active-feature? state "render-wasm/v1")
(let [content (d/merge (ted/export-content content)
(dissoc (:content shape) :children))]
(rx/merge
(rx/of (update-editor-state shape nil))
(when (and (not= content (:content shape))
(some? (:current-page-id state))
(some? shape))
(rx/of
(dwsh/update-shapes
[id]
(fn [shape]
(-> shape
(assoc :content content)
(cond-> (and update-name? (some? name))
(assoc :name name))))
{:undo-group (when new-shape? id)})
(dwm/apply-wasm-modifiers
(resize-wasm-text-modifiers shape content)
{:undo-group (when new-shape? id)})))))
(let [content (d/merge (ted/export-content content)
(dissoc (:content shape) :children))
modifiers (get-in state [:workspace-text-modifier id])]
@ -119,7 +182,7 @@
(assoc :name name))
(cond-> (or (some? width) (some? height))
(gsh/transform-shape (ctm/change-size shape width height))))))
{:undo-group (when new-shape? id)})))))
{:undo-group (when new-shape? id)}))))))
(when (some? id)
(rx/of (dws/deselect-shape id)
@ -733,7 +796,14 @@
(rx/empty)))
(when (features/active-feature? state "text-editor/v2")
(rx/of (v2-update-text-editor-styles id attrs)))))))
(rx/of (v2-update-text-editor-styles id attrs)))
(when (features/active-feature? state "render-wasm/v1")
;; This delay is to give time for the font to be correctly rendered
;; in wasm.
(cond->> (rx/of (resize-wasm-text id))
(contains? attrs :font-id)
(rx/delay 200)))))))
ptk/EffectEvent
(effect [_ state _]
@ -852,18 +922,38 @@
(ptk/reify ::v2-update-text-shape-position-data
ptk/UpdateEvent
(update [_ state]
(let []
(update-in state [:workspace-text-modifier shape-id] {:position-data position-data})))))
(update-in state [:workspace-text-modifier shape-id] {:position-data position-data}))))
(defn v2-update-text-shape-content
([id content]
(v2-update-text-shape-content id content false nil))
([id content update-name?]
(v2-update-text-shape-content id content update-name? nil))
([id content update-name? name]
[id content & {:keys [update-name? name finalize?]
:or {update-name? false name nil finalize? false}}]
(ptk/reify ::v2-update-text-shape-content
ptk/WatchEvent
(watch [_ state _]
(if (features/active-feature? state "render-wasm/v1")
(let [objects (dsh/lookup-page-objects state)
shape (get objects id)
new-shape? (nil? (:content shape))]
(rx/of
(dwsh/update-shapes
[id]
(fn [shape]
(let [new-shape (-> shape
(assoc :content content)
(cond-> (and update-name? (some? name))
(assoc :name name)))]
new-shape))
{:undo-group (when new-shape? id)})
(if finalize?
(dwm/apply-wasm-modifiers
(resize-wasm-text-modifiers shape content)
{:undo-group (when new-shape? id)})
(dwm/set-wasm-modifiers
(resize-wasm-text-modifiers shape content)
{:undo-group (when new-shape? id)}))))
(let [objects (dsh/lookup-page-objects state)
shape (get objects id)
modifiers (get-in state [:workspace-text-modifier id])

28
frontend/src/app/main/data/workspace/transforms.cljs
View file

@ -1169,3 +1169,31 @@
(if (features/active-feature? state "render-wasm/v1")
(rx/of (dwm/apply-wasm-modifiers modifiers {:undo-group undo-group}))
(rx/of (dwm/apply-modifiers {:modifiers modifiers :undo-group undo-group})))))))
(defn resize-text-editor
[id {:keys [width height]}]
(ptk/reify ::resize-text-editor
ptk/WatchEvent
(watch [_ state _]
(let [objects (dsh/lookup-page-objects state)
shape (get objects id)
resize-v
(gpt/point
(/ width (-> shape :selrect :width))
(/ height (-> shape :selrect :height)))
origin
(first (:points shape))
modifiers
{id
{:modifiers
(ctm/resize-modifiers
resize-v
origin
(:transform shape (gmt/matrix))
(:transform-inverse shape (gmt/matrix)))}}]
(.log js/console (clj->js modifiers))
(rx/of (dwm/set-wasm-modifiers modifiers))))))

19
frontend/src/app/main/ui/workspace/shapes/text/text_edition_outline.cljs
View file

@ -8,11 +8,28 @@
(:require
[app.common.geom.shapes :as gsh]
[app.main.data.workspace.texts :as dwt]
[app.main.features :as features]
[app.main.refs :as refs]
[app.main.store :as st]
[app.render-wasm.api :as wasm.api]
[rumext.v2 :as mf]))
(mf/defc text-edition-outline
[{:keys [shape zoom modifiers]}]
(if (features/active-feature? @st/state "render-wasm/v1")
(let [transform (gsh/transform-str shape)
{:keys [id x y]} shape
{:keys [width height]} (wasm.api/text-dimensions id)]
[:rect.main.viewport-selrect
{:x x
:y y
:width width
:height height
:transform transform
:style {:stroke "var(--color-accent-tertiary)"
:stroke-width (/ 1 zoom)
:fill "none"}}])
(let [modifiers (get-in modifiers [(:id shape) :modifiers])
text-modifier-ref
@ -39,4 +56,4 @@
:transform transform
:style {:stroke "var(--color-accent-tertiary)"
:stroke-width (/ 1 zoom)
:fill "none"}}]))
:fill "none"}}])))

9
frontend/src/app/main/ui/workspace/shapes/text/v2_editor.cljs
View file

@ -69,7 +69,10 @@
on-blur
(fn []
(when-let [content (content/dom->cljs (dwt/get-editor-root instance))]
(st/emit! (dwt/v2-update-text-shape-content shape-id content update-name? (gen-name instance))))
(st/emit! (dwt/v2-update-text-shape-content shape-id content
:update-name? update-name?
:name (gen-name instance)
:finalize? true)))
(let [container-node (mf/ref-val container-ref)]
(dom/set-style! container-node "opacity" 0)))
@ -87,7 +90,7 @@
on-needs-layout
(fn []
(when-let [content (content/dom->cljs (dwt/get-editor-root instance))]
(st/emit! (dwt/v2-update-text-shape-content shape-id content true)))
(st/emit! (dwt/v2-update-text-shape-content shape-id content :update-name? true)))
;; FIXME: We need to find a better way to trigger layout changes.
#_(st/emit!
(dwt/v2-update-text-shape-position-data shape-id [])))
@ -95,7 +98,7 @@
on-change
(fn []
(when-let [content (content/dom->cljs (dwt/get-editor-root instance))]
(st/emit! (dwt/v2-update-text-shape-content shape-id content true))))]
(st/emit! (dwt/v2-update-text-shape-content shape-id content :update-name? true))))]
(.addEventListener ^js global/document "keyup" on-key-up)
(.addEventListener ^js instance "blur" on-blur)

4
frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs
View file

@ -15,6 +15,7 @@
[app.main.data.workspace.shortcuts :as sc]
[app.main.data.workspace.texts :as dwt]
[app.main.data.workspace.undo :as dwu]
[app.main.features :as features]
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
@ -130,6 +131,9 @@
(st/emit!
(dwu/start-undo-transaction uid)
(dwsh/update-shapes ids #(assoc % :grow-type grow-type)))
(when (features/active-feature? @st/state "render-wasm/v1")
(st/emit! (dwt/resize-wasm-text-all ids)))
;; We asynchronously commit so every sychronous event is resolved first and inside the transaction
(ts/schedule #(st/emit! (dwu/commit-undo-transaction uid))))
(when (some? on-blur) (on-blur))))]

6
frontend/src/app/main/ui/workspace/viewport_wasm.cljs
View file

@ -16,6 +16,7 @@
[app.common.types.shape-tree :as ctt]
[app.common.types.shape.layout :as ctl]
[app.main.data.workspace.modifiers :as dwm]
[app.main.data.workspace.transforms :as dwt]
[app.main.features :as features]
[app.main.refs :as refs]
[app.main.store :as st]
@ -305,9 +306,12 @@
(let [content (-> active-editor-state
(ted/get-editor-current-content)
(ted/export-content))]
(wasm.api/use-shape edition)
(wasm.api/set-shape-text-content content)
(let [dimension (wasm.api/text-dimensions)]
(st/emit! (dwt/resize-text-editor edition dimension))
(wasm.api/clear-drawing-cache)
(wasm.api/request-render "content")))))
(wasm.api/request-render "content"))))))
(mf/with-effect [vport]
(when @canvas-init?

22
frontend/src/app/render_wasm/api.cljs
View file

@ -582,6 +582,8 @@
(h/call wasm/internal-module "_add_shape_shadow" rgba blur spread x y (sr/translate-shadow-style style) hidden)
(recur (inc index)))))))
(declare propagate-apply)
(defn set-shape-text-content
[content]
(h/call wasm/internal-module "_clear_shape_text")
@ -604,6 +606,22 @@
fonts)]
(f/store-fonts fonts))))
(defn set-shape-grow-type
[grow-type]
(h/call wasm/internal-module "_set_shape_grow_type" (sr/translate-grow-type grow-type)))
(defn text-dimensions
([id]
(use-shape id)
(text-dimensions))
([]
(let [offset (h/call wasm/internal-module "_get_text_dimensions")
heapf32 (mem/get-heap-f32)
width (aget heapf32 (mem/ptr8->ptr32 offset))
height (aget heapf32 (mem/ptr8->ptr32 (+ offset 4)))]
(h/call wasm/internal-module "_free_bytes")
{:width width :height height})))
(defn set-view-box
[zoom vbox]
(h/call wasm/internal-module "_set_view" zoom (- (:x vbox)) (- (:y vbox)))
@ -639,6 +657,7 @@
opacity (dm/get-prop shape :opacity)
hidden (dm/get-prop shape :hidden)
content (dm/get-prop shape :content)
grow-type (dm/get-prop shape :grow-type)
blur (dm/get-prop shape :blur)
corners (when (some? (dm/get-prop shape :r1))
[(dm/get-prop shape :r1)
@ -677,7 +696,8 @@
(when (some? shadows) (set-shape-shadows shadows))
(when (and (= type :text) (some? content))
(set-shape-text-content content))
(when (= type :text)
(set-shape-grow-type grow-type))
(when (or (ctl/any-layout? shape)
(ctl/any-layout-immediate-child? objects shape))
(set-layout-child shape))

7
frontend/src/app/render_wasm/serializers.cljs
View file

@ -283,6 +283,13 @@
:remove-children 1
:add-children 2))
(defn translate-grow-type
[grow-type]
(case grow-type
:auto-width 1
:auto-height 2
0))
(defn- serialize-enum
[value enum-map]
(get enum-map value 0))

3
frontend/src/app/render_wasm/shape.cljs
View file

@ -152,6 +152,9 @@
(= (:type shape) :text)
(into [] (api/set-shape-text-content v)))
:grow-type
(api/set-shape-grow-type v)
(:layout-item-margin
:layout-item-margin-type
:layout-item-h-sizing

1
render-wasm/src/render.rs
View file

@ -356,6 +356,7 @@ impl RenderState {
s.canvas().concat(&matrix);
});
let text_content = text_content.new_bounds(shape.selrect());
let paragraphs = text_content.get_skia_paragraphs(&self.fonts.font_collection());
shadows::render_text_drop_shadows(self, &shape, &paragraphs, antialias);

6
render-wasm/src/shapes.rs
View file

@ -711,9 +711,9 @@ impl Shape {
}
pub fn clear_text(&mut self) {
match self.shape_type {
Type::Text(_) => {
let new_text_content = TextContent::new(self.selrect);
match &self.shape_type {
Type::Text(old_text_content) => {
let new_text_content = TextContent::new(self.selrect, old_text_content.grow_type());
self.shape_type = Type::Text(new_text_content);
}
_ => {}

102
render-wasm/src/shapes/text.rs
View file

@ -12,19 +12,57 @@ use super::FontFamily;
use crate::utils::uuid_from_u32;
use crate::Uuid;
#[derive(Debug, PartialEq, Clone, Copy)]
pub enum GrowType {
Fixed,
AutoWidth,
AutoHeight,
}
impl GrowType {
pub fn from(grow_type: u8) -> Self {
match grow_type {
0 => Self::Fixed,
1 => Self::AutoWidth,
2 => Self::AutoHeight,
_ => unreachable!(),
}
}
}
#[derive(Debug, PartialEq, Clone)]
pub struct TextContent {
paragraphs: Vec<Paragraph>,
bounds: Rect,
grow_type: GrowType,
}
pub fn set_paragraphs_width(width: f32, paragraphs: &mut Vec<Vec<skia::textlayout::Paragraph>>) {
for group in paragraphs {
for paragraph in group {
paragraph.layout(width)
}
}
}
impl TextContent {
pub fn new(bounds: Rect) -> Self {
pub fn new(bounds: Rect, grow_type: GrowType) -> Self {
let mut res = Self::default();
res.bounds = bounds;
res.grow_type = grow_type;
res
}
pub fn new_bounds(&self, bounds: Rect) -> Self {
let paragraphs = self.paragraphs.clone();
let grow_type = self.grow_type;
Self {
paragraphs,
bounds,
grow_type,
}
}
pub fn set_xywh(&mut self, x: f32, y: f32, w: f32, h: f32) {
self.bounds = Rect::from_xywh(x, y, w, h);
}
@ -97,22 +135,25 @@ impl TextContent {
paragraph_group
}
pub fn collect_paragraphs(
&self,
mut paragraphs: Vec<Vec<skia::textlayout::Paragraph>>,
) -> Vec<Vec<skia::textlayout::Paragraph>> {
if self.grow_type() == GrowType::AutoWidth {
set_paragraphs_width(f32::MAX, &mut paragraphs);
let max_width = auto_width(&paragraphs).ceil();
set_paragraphs_width(max_width, &mut paragraphs);
} else {
set_paragraphs_width(self.width(), &mut paragraphs);
}
paragraphs
}
pub fn get_skia_paragraphs(
&self,
fonts: &FontCollection,
) -> Vec<Vec<skia::textlayout::Paragraph>> {
self.to_paragraphs(fonts)
.into_iter()
.map(|group| {
group
.into_iter()
.map(|mut paragraph| {
paragraph.layout(self.width());
paragraph
})
.collect()
})
.collect()
self.collect_paragraphs(self.to_paragraphs(fonts))
}
pub fn get_skia_stroke_paragraphs(
@ -120,18 +161,15 @@ impl TextContent {
fonts: &FontCollection,
paints: &Vec<Paint>,
) -> Vec<Vec<skia::textlayout::Paragraph>> {
self.to_stroke_paragraphs(fonts, paints)
.into_iter()
.map(|group| {
group
.into_iter()
.map(|mut paragraph| {
paragraph.layout(self.width());
paragraph
})
.collect()
})
.collect()
self.collect_paragraphs(self.to_stroke_paragraphs(fonts, paints))
}
pub fn grow_type(&self) -> GrowType {
self.grow_type
}
pub fn set_grow_type(&mut self, grow_type: GrowType) {
self.grow_type = grow_type;
}
}
@ -140,6 +178,7 @@ impl Default for TextContent {
Self {
paragraphs: vec![],
bounds: Rect::default(),
grow_type: GrowType::Fixed,
}
}
}
@ -495,3 +534,16 @@ impl From<&Vec<u8>> for RawTextData {
Self { paragraph }
}
}
pub fn auto_width(paragraphs: &Vec<Vec<skia::textlayout::Paragraph>>) -> f32 {
paragraphs.iter().flatten().fold(0.0, |auto_width, p| {
f32::max(p.max_intrinsic_width(), auto_width)
})
}
pub fn auto_height(paragraphs: &Vec<Vec<skia::textlayout::Paragraph>>) -> f32 {
paragraphs
.iter()
.flatten()
.fold(0.0, |auto_height, p| auto_height + p.height())
}

50
render-wasm/src/wasm/text.rs
View file

@ -1,7 +1,8 @@
use crate::mem;
use crate::shapes::RawTextData;
use crate::with_current_shape;
use crate::shapes::{auto_height, auto_width, GrowType, RawTextData, Type};
use crate::STATE;
use crate::{with_current_shape, with_state};
#[no_mangle]
pub extern "C" fn clear_shape_text() {
@ -22,3 +23,48 @@ pub extern "C" fn set_shape_text_content() {
mem::free_bytes();
}
#[no_mangle]
pub extern "C" fn set_shape_grow_type(grow_type: u8) {
with_current_shape!(state, |shape: &mut Shape| {
if let Type::Text(text_content) = &mut shape.shape_type {
text_content.set_grow_type(GrowType::from(grow_type));
}
});
}
#[no_mangle]
pub extern "C" fn get_text_dimensions() -> *mut u8 {
let font_col;
with_state!(state, {
font_col = state.render_state.fonts.font_collection();
});
let mut width = 0.01;
let mut height = 0.01;
with_current_shape!(state, |shape: &mut Shape| {
width = shape.selrect.width();
height = shape.selrect.height();
if let Type::Text(content) = &shape.shape_type {
match content.grow_type() {
GrowType::AutoWidth => {
let paragraphs = content.get_skia_paragraphs(font_col);
width = auto_width(&paragraphs);
height = auto_height(&paragraphs);
}
GrowType::AutoHeight => {
let paragraphs = content.get_skia_paragraphs(font_col);
height = auto_height(&paragraphs);
}
_ => {}
}
}
});
let mut bytes = Vec::<u8>::with_capacity(8);
bytes.resize(8, 0);
bytes[0..4].clone_from_slice(&width.to_le_bytes());
bytes[4..8].clone_from_slice(&height.to_le_bytes());
mem::write_bytes(bytes)
}