From 639952abc84071318fb73e99349829f3c3b2645a Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Thu, 13 Nov 2025 12:31:02 +0100 Subject: [PATCH] :bug: Fix problems with text positioning in layout --- frontend/src/app/main/data/helpers.cljs | 10 +++++ frontend/src/app/main/refs.cljs | 3 ++ .../shapes/text/text_edition_outline.cljs | 7 ++- .../ui/workspace/shapes/text/v2_editor.cljs | 44 ++++++++++++++----- .../main/ui/workspace/viewport/selection.cljs | 22 +++------- 5 files changed, 55 insertions(+), 31 deletions(-) diff --git a/frontend/src/app/main/data/helpers.cljs b/frontend/src/app/main/data/helpers.cljs index 05237fcd1b..97b8911385 100644 --- a/frontend/src/app/main/data/helpers.cljs +++ b/frontend/src/app/main/data/helpers.cljs @@ -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)])) diff --git a/frontend/src/app/main/refs.cljs b/frontend/src/app/main/refs.cljs index f699ce20f1..2561557367 100644 --- a/frontend/src/app/main/refs.cljs +++ b/frontend/src/app/main/refs.cljs @@ -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 diff --git a/frontend/src/app/main/ui/workspace/shapes/text/text_edition_outline.cljs b/frontend/src/app/main/ui/workspace/shapes/text/text_edition_outline.cljs index 6214bf64b4..b7367a4431 100644 --- a/frontend/src/app/main/ui/workspace/shapes/text/text_edition_outline.cljs +++ b/frontend/src/app/main/ui/workspace/shapes/text/text_edition_outline.cljs @@ -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 diff --git a/frontend/src/app/main/ui/workspace/shapes/text/v2_editor.cljs b/frontend/src/app/main/ui/workspace/shapes/text/v2_editor.cljs index 3bcc00fc0a..e611409192 100644 --- a/frontend/src/app/main/ui/workspace/shapes/text/v2_editor.cljs +++ b/frontend/src/app/main/ui/workspace/shapes/text/v2_editor.cljs @@ -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}]]] diff --git a/frontend/src/app/main/ui/workspace/viewport/selection.cljs b/frontend/src/app/main/ui/workspace/viewport/selection.cljs index 071233f44b..6f34d8d13f 100644 --- a/frontend/src/app/main/ui/workspace/viewport/selection.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/selection.cljs @@ -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))