🐛 Fix frame titles deforming when resize

CHANGES.md

@@ -6,6 +6,7 @@
 
 - Fix problem with multi-user text editing [Taiga #3446](https://tree.taiga.io/project/penpot/issue/3446)
 - Fix path tools blocking elements underneath [#2050](https://github.com/penpot/penpot/issues/2050)
+- Fix frame titles deforming when resize [#2207](https://github.com/penpot/penpot/issues/2207)
 
 ## 1.15.1-beta
 

common/src/app/common/geom/shapes/transforms.cljc

@@ -160,12 +160,12 @@
   ([shape]
    (transform-str shape nil))
 
-  ([{:keys [transform flip-x flip-y] :as shape} {:keys [no-flip]}]
+  ([{:keys [transform flip-x flip-y] :as shape} {:keys [no-flip] :as params}]
    (if (and (some? shape)
             (or (some? transform)
                 (and (not no-flip) flip-x)
                 (and (not no-flip) flip-y)))
-     (dm/str (transform-matrix shape))
+     (dm/str (transform-matrix shape params))
      "")))
 
 (defn inverse-transform-matrix

frontend/src/app/main/ui/workspace/shapes/frame/dynamic_modifiers.cljs

@@ -11,6 +11,8 @@
    [app.common.geom.matrix :as gmt]
    [app.common.geom.point :as gpt]
    [app.common.geom.shapes :as gsh]
+   [app.main.store :as st]
+   [app.main.ui.workspace.viewport.utils :as vwu]
    [app.util.dom :as dom]
    [rumext.alpha :as mf]))
 
@@ -202,6 +204,12 @@
                               (gsh/transform-matrix {:no-flip true}))]
                   (override-transform-att! node "transform" mtx))))
 
+            (dom/class? node "frame-title")
+            (let [shape (-> shape (assoc :modifiers modifiers) gsh/transform-shape)
+                  zoom (get-in @st/state [:workspace-local :zoom] 1)
+                  mtx  (vwu/title-transform shape zoom)]
+              (override-transform-att! node "transform" mtx))
+
             (or (= (dom/get-tag-name node) "mask")
                 (= (dom/get-tag-name node) "filter"))
             (transform-region! node modifiers)

frontend/src/app/main/ui/workspace/viewport/utils.cljs

@@ -9,6 +9,7 @@
    [app.common.data :as d]
    [app.common.data.macros :as dm]
    [app.common.geom.point :as gpt]
+   [app.common.geom.shapes :as gsh]
    [app.main.ui.cursors :as cur]
    [app.main.ui.formats :refer [format-number]]
    [app.util.dom :as dom]))
@@ -45,3 +46,18 @@
     :zoom-in cur/zoom-in
     :zooom-out cur/zoom-out
     cur/pointer-inner))
+
+;; Ensure that the label has always the same font
+;; size, regardless of zoom
+;; https://css-tricks.com/transforms-on-svg-elements/
+(defn text-transform
+  [{:keys [x y]} zoom]
+  (let [inv-zoom (/ 1 zoom)]
+    (str
+     "scale(" inv-zoom ", " inv-zoom ") "
+     "translate(" (* zoom x) ", " (* zoom y) ")")))
+
+(defn title-transform [frame zoom]
+  (let [frame-transform (gsh/transform-str frame {:no-flip true})
+        label-pos (gpt/point (:x frame) (- (:y frame) (/ 10 zoom)))]
+    (dm/str frame-transform " " (text-transform label-pos zoom))))

frontend/src/app/main/ui/workspace/viewport/widgets.cljs

@@ -20,6 +20,7 @@
    [app.main.ui.hooks :as hooks]
    [app.main.ui.icons :as i]
    [app.main.ui.workspace.viewport.path-actions :refer [path-actions]]
+   [app.main.ui.workspace.viewport.utils :as vwu]
    [app.util.dom :as dom]
    [rumext.alpha :as mf]))
 
@@ -82,25 +83,11 @@
               :stroke "rgb(49, 239, 184)"
               :stroke-width (/ 1 zoom)}}]))
 
-;; Ensure that the label has always the same font
-;; size, regardless of zoom
-;; https://css-tricks.com/transforms-on-svg-elements/
-(defn text-transform
-  [{:keys [x y]} zoom]
-  (let [inv-zoom (/ 1 zoom)]
-    (str
-     "scale(" inv-zoom ", " inv-zoom ") "
-     "translate(" (* zoom x) ", " (* zoom y) ")")))
 
 (mf/defc frame-title
   {::mf/wrap [mf/memo]}
   [{:keys [frame selected? zoom show-artboard-names? on-frame-enter on-frame-leave on-frame-select]}]
-  (let [{:keys [width x y]} frame
+  (let [on-mouse-down
-        label-pos (gpt/point x (- y (/ 10 zoom)))
-
-        frame-transform (gsh/transform-str frame)
-
-        on-mouse-down
         (mf/use-callback
          (mf/deps (:id frame) on-frame-select)
          (fn [bevent]
@@ -140,23 +127,22 @@
         text-pos-x (if (:use-for-thumbnail? frame) 15 0)]
 
     (when (not (:hidden frame))
-      [:g {:id (dm/str "frame-title-" (:id frame))}
+      [:g.frame-title {:id (dm/str "frame-title-" (:id frame)) :transform (vwu/title-transform frame zoom)}
        (when (:use-for-thumbnail? frame)
-         [:g {:transform (dm/str frame-transform " " (text-transform label-pos zoom))}
+         [:svg {:x 0
-          [:svg {:x 0
+                :y -9
-                 :y -9
+                :width 12
-                 :width 12
+                :height 12
-                 :height 12
+                :class "workspace-frame-icon"
-                 :class "workspace-frame-icon"
+                :style {:fill (when selected? "var(--color-primary-dark)")}
-                 :style {:fill (when selected? "var(--color-primary-dark)")}
+                :visibility (if show-artboard-names? "visible" "hidden")}
-                 :visibility (if show-artboard-names? "visible" "hidden")}
+          [:use {:href "#icon-set-thumbnail"}]])
-           [:use {:href "#icon-set-thumbnail"}]]])
        [:text {:x text-pos-x
                :y 0
-               :width width
+               :width (:width frame)
                :height 20
                :class "workspace-frame-label"
-               :transform (dm/str frame-transform " " (text-transform label-pos zoom))
+               ;:transform (dm/str frame-transform " " (text-transform label-pos zoom))
                :style {:fill (when selected? "var(--color-primary-dark)")}
                :visibility (if show-artboard-names? "visible" "hidden")
                :on-mouse-down on-mouse-down
@@ -172,7 +158,6 @@
   [props]
   (let [objects         (unchecked-get props "objects")
         zoom            (unchecked-get props "zoom")
-        modifiers       (unchecked-get props "modifiers")
         selected        (or (unchecked-get props "selected") #{})
         show-artboard-names? (unchecked-get props "show-artboard-names?")
         on-frame-enter  (unchecked-get props "on-frame-enter")
@@ -188,7 +173,6 @@
                           :selected? (contains? selected (:id frame))
                           :zoom zoom
                           :show-artboard-names? show-artboard-names?
-                          :modifiers modifiers
                           :on-frame-enter on-frame-enter
                           :on-frame-leave on-frame-leave
                           :on-frame-select on-frame-select}]))]))
@@ -231,7 +215,7 @@
                      :height 24
                      :transform (str (when (and selected? modifiers)
                                        (str (:displacement modifiers) " " ))
-                                     (text-transform flow-pos zoom))}
+                                     (vwu/text-transform flow-pos zoom))}
      [:div.flow-badge {:class (dom/classnames :selected selected?)}
       [:div.content {:on-mouse-down on-mouse-down
                      :on-double-click on-double-click