mirror
/
penpot
mirror of https://github.com/penpot/penpot.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

🐛 Fix problems with text positioning in layout

This commit is contained in:
alonso.torres 2025-11-13 12:31:02 +01:00
parent 2d63730bfa
commit 639952abc8
5 changed files with 55 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/app/main/data/helpers.cljs
View File

@ -9,6 +9,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.types.path :as path]))
@ -207,3 +208,12 @@
:projects
(filter #(= team-id (:team-id (val %))))
(into {}))))
(defn get-selrect
[selrect-transform shape]
(if (some? selrect-transform)
(let [{:keys [center width height transform]} selrect-transform]
[(gsh/center->rect center width height)
(gmt/transform-in center transform)])
[(dm/get-prop shape :selrect)
(gsh/transform-matrix shape)]))

3
frontend/src/app/main/refs.cljs
View File

@ -154,6 +154,9 @@
"All tokens related ephimeral state"
(l/derived :workspace-tokens st/state))
(def workspace-selrect
(l/derived :workspace-selrect st/state))
;; WARNING: Don't use directly from components, this is a proxy to
;; improve performance of selected-shapes and
(def ^:private selected-shapes-data

7
frontend/src/app/main/ui/workspace/shapes/text/text_edition_outline.cljs
View File

@ -7,19 +7,18 @@
(ns app.main.ui.workspace.shapes.text.text-edition-outline
(:require
[app.common.geom.shapes :as gsh]
[app.main.data.helpers :as dsh]
[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 grow-type]} shape
{:keys [width height]} (if (= :fixed grow-type) shape (wasm.api/get-text-dimensions id))]
(let [selrect-transform (mf/deref refs/workspace-selrect)
[{:keys [x y width height]} transform] (dsh/get-selrect selrect-transform shape)]
[:rect.main.viewport-selrect
{:x x
:y y

44
frontend/src/app/main/ui/workspace/shapes/text/v2_editor.cljs
View File

@ -10,12 +10,14 @@
[app.common.data :as d]
[app.common.data.macros :as dm]
[app.common.files.helpers :as cfh]
[app.common.geom.rect :as grc]
[app.common.geom.shapes :as gsh]
[app.common.geom.shapes.text :as gst]
[app.common.math :as mth]
[app.common.types.color :as color]
[app.common.types.text :as txt]
[app.config :as cf]
[app.main.data.helpers :as dsh]
[app.main.data.workspace :as dw]
[app.main.data.workspace.texts :as dwt]
[app.main.features :as features]
@ -226,8 +228,8 @@
(stl/css :text-editor-container))
:ref container-ref
:data-testid "text-editor-container"
:style {:width (:width shape)
:height (:height shape)}
:style {:width "var(--editor-container-width)"
:height "var(--editor-container-height)"}
;; We hide the editor when is blurred because otherwise the
;; selection won't let us see the underlying text. Use opacity
;; because display or visibility won't allow to recover focus
@ -303,12 +305,22 @@
(some? modifiers)
(gsh/transform-shape modifiers))
[x y width height]
(if (features/active-feature? @st/state "render-wasm/v1")
(let [{:keys [width height]} (wasm.api/get-text-dimensions shape-id)
{:keys [x y]} (:selrect shape)]
render-wasm? (mf/use-memo #(features/active-feature? @st/state "render-wasm/v1"))
[x y width height])
[{:keys [x y width height]} transform]
(if render-wasm?
(let [{:keys [width height]} (wasm.api/get-text-dimensions shape-id)
selrect-transform (mf/deref refs/workspace-selrect)
[selrect transform] (dsh/get-selrect selrect-transform shape)
valign (-> shape :content :vertical-align)
y (:y selrect)
y (case valign
"bottom" (- y (- height (:height selrect)))
"center" (- y (/ (- height (:height selrect)) 2))
y)]
[(assoc selrect :y y :width width :height height) transform])
(let [bounds (gst/shape->rect shape)
x (mth/min (dm/get-prop bounds :x)
@ -319,12 +331,24 @@
(dm/get-prop shape :width))
height (mth/max (dm/get-prop bounds :height)
(dm/get-prop shape :height))]
[x y width height]))
[(grc/make-rect x y width height) (gsh/transform-matrix shape)]))
style
(cond-> #js {:pointerEvents "all"}
render-wasm?
(obj/merge!
#js {"--editor-container-width" (dm/str width "px")
"--editor-container-height" (dm/str height "px")})
(not (cf/check-browser? :safari))
(not render-wasm?)
(obj/merge!
#js {"--editor-container-width" (dm/str (:width shape) "px")
"--editor-container-height" (dm/str (:height shape) "px")})
;; Transform is necessary when there is a text overflow and the vertical
;; aligment is center or bottom.
(and (not render-wasm?)
(not (cf/check-browser? :safari)))
(obj/merge!
#js {:transform (dm/fmt "translate(%px, %px)" (- (dm/get-prop shape :x) x) (- (dm/get-prop shape :y) y))})
@ -345,7 +369,7 @@
(dm/fmt "scale(%)" maybe-zoom))}))]
[:g.text-editor {:clip-path (dm/fmt "url(#%)" clip-id)
:transform (dm/str (gsh/transform-matrix shape))}
:transform (dm/str transform)}
[:defs
[:clipPath {:id clip-id}
[:rect {:x x :y y :width width :height height}]]]

22
frontend/src/app/main/ui/workspace/viewport/selection.cljs
View File

@ -15,6 +15,7 @@
[app.common.types.component :as ctk]
[app.common.types.container :as ctn]
[app.common.types.shape :as cts]
[app.main.data.helpers :as dsh]
[app.main.data.workspace :as dw]
[app.main.data.workspace.shapes :as dwsh]
[app.main.refs :as refs]
@ -25,7 +26,6 @@
[app.util.debug :as dbg]
[app.util.dom :as dom]
[app.util.object :as obj]
[okulary.core :as l]
[rumext.v2 :as mf]))
(def rotation-handler-size 20)
@ -327,23 +327,11 @@
:style {:fill (if (dbg/enabled? :handlers) "yellow" "none")
:stroke-width 0}}]]))
(def workspace-selrect-transform
(l/derived :workspace-selrect st/state))
(defn get-selrect
[selrect-transform shape]
(if (some? selrect-transform)
(let [{:keys [center width height transform]} selrect-transform]
[(gsh/center->rect center width height)
(gmt/transform-in center transform)])
[(dm/get-prop shape :selrect)
(gsh/transform-matrix shape)]))
(mf/defc controls-selection*
[{:keys [shape zoom color on-move-selected on-context-menu disabled]}]
(let [selrect-transform (mf/deref workspace-selrect-transform)
(let [selrect-transform (mf/deref refs/workspace-selrect)
transform-type (mf/deref refs/current-transform)
[selrect transform] (get-selrect selrect-transform shape)]
[selrect transform] (dsh/get-selrect selrect-transform shape)]
(when (and (some? selrect)
(not (or (= transform-type :move)
@ -360,7 +348,7 @@
(mf/defc controls-handlers*
{::mf/private true}
[{:keys [shape zoom color on-resize on-rotate disabled]}]
(let [selrect-transform (mf/deref workspace-selrect-transform)
(let [selrect-transform (mf/deref refs/workspace-selrect)
transform-type (mf/deref refs/current-transform)
read-only? (mf/use-ctx ctx/workspace-read-only?)
@ -368,7 +356,7 @@
layout (mf/deref refs/workspace-layout)
scale-text? (contains? layout :scale-text)
[selrect transform] (get-selrect selrect-transform shape)
[selrect transform] (dsh/get-selrect selrect-transform shape)
rotation (-> (gpt/point 1 0)
(gpt/transform (:transform shape))