diff --git a/CHANGES.md b/CHANGES.md index 05a07bb9e..fa142509b 100644 --- a/CHANGES.md +++ b/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 diff --git a/common/src/app/common/geom/shapes/transforms.cljc b/common/src/app/common/geom/shapes/transforms.cljc index 5d9977410..eeea7aaf1 100644 --- a/common/src/app/common/geom/shapes/transforms.cljc +++ b/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 diff --git a/frontend/src/app/main/ui/workspace/shapes/frame/dynamic_modifiers.cljs b/frontend/src/app/main/ui/workspace/shapes/frame/dynamic_modifiers.cljs index dc46bf241..60bb2a774 100644 --- a/frontend/src/app/main/ui/workspace/shapes/frame/dynamic_modifiers.cljs +++ b/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) diff --git a/frontend/src/app/main/ui/workspace/viewport/utils.cljs b/frontend/src/app/main/ui/workspace/viewport/utils.cljs index e657b7267..6415c4b9d 100644 --- a/frontend/src/app/main/ui/workspace/viewport/utils.cljs +++ b/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)))) diff --git a/frontend/src/app/main/ui/workspace/viewport/widgets.cljs b/frontend/src/app/main/ui/workspace/viewport/widgets.cljs index 56725968f..0f24559cc 100644 --- a/frontend/src/app/main/ui/workspace/viewport/widgets.cljs +++ b/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 - label-pos (gpt/point x (- y (/ 10 zoom))) - - frame-transform (gsh/transform-str frame) - - on-mouse-down + (let [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 - :y -9 - :width 12 - :height 12 - :class "workspace-frame-icon" - :style {:fill (when selected? "var(--color-primary-dark)")} - :visibility (if show-artboard-names? "visible" "hidden")} - [:use {:href "#icon-set-thumbnail"}]]]) + [:svg {:x 0 + :y -9 + :width 12 + :height 12 + :class "workspace-frame-icon" + :style {:fill (when selected? "var(--color-primary-dark)")} + :visibility (if show-artboard-names? "visible" "hidden")} + [: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