Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-08 07:50:43 -05:00
Code Issues Activity

🐛 Fix frame titles deforming when resize

Browse source
This commit is contained in:
alonso.torres 2022-08-30 17:12:43 +02:00
parent a301856c0d
commit 29f1c8bb4d
5 changed files with 41 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
CHANGES.md
View file

@ -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

4
common/src/app/common/geom/shapes/transforms.cljc
View file

@ -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

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

@ -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)

16
frontend/src/app/main/ui/workspace/viewport/utils.cljs
View file

@ -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))))

44
frontend/src/app/main/ui/workspace/viewport/widgets.cljs
View file

@ -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