Merge pull request #3574 from penpot/azazeln28-fix-text-shapes-rendered-with-bad-proportions

🐛 Fix text shapes rendered with bad proportions

CHANGES.md

@@ -6,6 +6,7 @@
 
 - List view is discarded on tab change on Workspace Assets Sidebar tab [Github #3547](https://github.com/penpot/penpot/issues/3547)
 - Fix message popup remains open when exiting workspace with browser back button [Taiga #5747](https://tree.taiga.io/project/penpot/issue/5747)
+- When editing text if font is changed, the proportions of the rendered shape are wrong [Taiga #5786](https://tree.taiga.io/project/penpot/issue/5786)
 
 ## 1.19.2
 

frontend/src/app/main/ui/workspace/shapes/text/viewport_texts_html.cljs

@@ -26,6 +26,7 @@
    [app.util.object :as obj]
    [app.util.text-editor :as ted]
    [app.util.text-svg-position :as tsp]
+   [app.util.timers :as ts]
    [promesa.core :as p]
    [rumext.v2 :as mf]))
 
@@ -79,25 +80,29 @@
 
 (defn- update-text-modifier
   [{:keys [grow-type id] :as shape} node]
+  (->> (tsp/calc-position-data id)
+       (p/fmap (fn [position-data]
+                 (let [props {:position-data position-data}]
+                   (if (contains? #{:auto-height :auto-width} grow-type)
+                     (let [{:keys [width height]} (-> (dom/query node ".paragraph-set") (dom/get-client-size))
+                           width (mth/ceil width)
+                           height (mth/ceil height)]
+                       (if (and (not (mth/almost-zero? width)) (not (mth/almost-zero? height)))
+                         (cond-> props
+                           (= grow-type :auto-width)
+                           (assoc :width width)
 
-  (p/let [position-data (tsp/calc-position-data id)
+                           (or (= grow-type :auto-height) (= grow-type :auto-width))
-          props {:position-data position-data}
+                           (assoc :height height))
-
+                         props))
-          props
+                     props))))
-          (if (contains? #{:auto-height :auto-width} grow-type)
+       (p/fmap (fn [props]
-            (let [{:keys [width height]} (-> (dom/query node ".paragraph-set") (dom/get-client-size))
+                 ;; We need to wait for the text modifier to be updated before
-                  width (mth/ceil width)
+                 ;; we can update the position data. Otherwise the position data
-                  height (mth/ceil height)]
+                 ;; will be wrong.
-              (if (and (not (mth/almost-zero? width)) (not (mth/almost-zero? height)))
+                 ;; TODO: This is a hack. We need to find a better way to do this.
-                (cond-> props
+                 (st/emit! (dwt/update-text-modifier id props))
-                  (= grow-type :auto-width)
+                 (ts/schedule 30 #(update-text-shape shape node))))))
-                  (assoc :width width)
-
-                  (or (= grow-type :auto-height) (= grow-type :auto-width))
-                  (assoc :height height))
-                props))
-            props)]
-    (st/emit! (dwt/update-text-modifier id props))))
 
 (mf/defc text-container
   {::mf/wrap-props false