🎉 Add resize scale for texts

2025-03-11 23:31:21 -05:00 · 2021-05-04 09:59:21 +02:00 · 2021-05-04 09:59:21 +02:00 · 4c48f34d61
commit 4c48f34d61
parent ebb6df4696
9 changed files with 67 additions and 5 deletions
--- a/CHANGES.md
+++ b/CHANGES.md
@ -3,6 +3,9 @@
 ## :rocket: Next

 ### :sparkles: New features
+
+- Add option to interactively scale text [Taiga #1527](https://tree.taiga.io/project/penpot/us/1527)
+
 ### :bug: Bugs fixed

 - Remove interactions when the destination artboard is deleted [Taiga #1656](https://tree.taiga.io/project/penpot/issue/1656)
--- a/common/app/common/geom/shapes/transforms.cljc
+++ b/common/app/common/geom/shapes/transforms.cljc
@ -6,13 +6,15 @@

 (ns app.common.geom.shapes.transforms
  (:require
+   [app.common.attrs :as attrs]
   [app.common.geom.matrix :as gmt]
   [app.common.geom.point :as gpt]
   [app.common.geom.shapes.common :as gco]
   [app.common.geom.shapes.path :as gpa]
   [app.common.geom.shapes.rect :as gpr]
   [app.common.math :as mth]
-   [app.common.data :as d]))
+   [app.common.data :as d]
+   [app.common.text :as txt]))

 ;; --- Relative Movement

@ -328,6 +330,23 @@
              (dissoc :modifiers))))
      shape)))

+(defn apply-text-resize
+  [shape orig-shape modifiers]
+  (if (and (= (:type shape) :text)
+           (:resize-scale-text modifiers))
+    (let [merge-attrs (fn [attrs]
+                        (let [font-size (-> (get attrs :font-size 14)
+                                            (d/parse-double)
+                                            (* (-> modifiers :resize-vector :x))
+                                            (str)
+                                            )]
+                          (attrs/merge attrs {:font-size font-size})))]
+      (update shape :content #(txt/transform-nodes
+                                txt/is-text-node?
+                                merge-attrs
+                                %)))
+    shape))
+
 (defn transform-shape [shape]
  (let [shape (apply-displacement shape)
        center (gco/center-shape shape)
@ -337,6 +356,7 @@
        (-> shape
            (set-flip modifiers)
            (apply-transform transform)
+            (apply-text-resize shape modifiers)
            (dissoc :modifiers)))
      shape)))

--- a/frontend/src/app/main/data/workspace.cljs
+++ b/frontend/src/app/main/data/workspace.cljs
@ -73,6 +73,7 @@
    :rules
    :display-grid
    :snap-grid
+    :scale-text
    :dynamic-alignment})

 (s/def ::layout-flags (s/coll-of ::layout-flag))
--- a/frontend/src/app/main/data/workspace/drawing.cljs
+++ b/frontend/src/app/main/data/workspace/drawing.cljs
@ -30,7 +30,12 @@
   (ptk/reify ::select-for-drawing
     ptk/UpdateEvent
     (update [_ state]
-       (update state :workspace-drawing assoc :tool tool :object data))
+       (-> state
+           (update :workspace-drawing assoc :tool tool :object data)
+           ;; When changing drawing tool disable "scale text" mode
+           ;; automatically, to help users that ignore how this
+           ;; mode works.
+           (update :workspace-layout disj :scale-text)))

     ptk/WatchEvent
     (watch [_ state stream]
--- a/frontend/src/app/main/data/workspace/shortcuts.cljs
+++ b/frontend/src/app/main/data/workspace/shortcuts.cljs
@ -61,7 +61,11 @@
   :toggle-alignment  {:tooltip (ds/meta "\\")
                       :command (ds/c-mod "\\")
                       :fn #(st/emit! (dw/toggle-layout-flags :dynamic-alignment))}
-   
+
+   :toggle-scale-text {:tooltip "K"
+                       :command "k"
+                       :fn #(st/emit! (dw/toggle-layout-flags :scale-text))}
+
   :increase-zoom      {:tooltip "+"
                        :command "+"
                        :fn #(st/emit! (dw/increase-zoom nil))}
--- a/frontend/src/app/main/data/workspace/transforms.cljs
+++ b/frontend/src/app/main/data/workspace/transforms.cljs
@ -81,11 +81,16 @@
 ;; -- RESIZE
 (defn start-resize
  [handler initial ids shape]
-  (letfn [(resize [shape initial resizing-shapes [point lock? point-snap]]
+  (letfn [(resize [shape initial resizing-shapes layout [point lock? point-snap]]
            (let [{:keys [width height]} (:selrect shape)
                  {:keys [rotation]} shape
                  shapev (-> (gpt/point width height))

+                  scale-text (:scale-text layout)
+
+                  ;; Force lock if the scale text mode is active
+                  lock? (or lock? scale-text)
+
                  ;; Vector modifiers depending on the handler
                  handler-modif (let [[x y] (handler-modifiers handler)] (gpt/point x y))

@ -119,6 +124,7 @@
                                    {:resize-vector scalev
                                     :resize-origin origin
                                     :resize-transform shape-transform
+                                     :resize-scale-text scale-text
                                     :resize-transform-inverse shape-transform-inverse}
                                    false))))

@ -154,7 +160,7 @@
                (rx/switch-map (fn [[point :as current]]
                               (->> (snap/closest-snap-point page-id resizing-shapes layout zoom point)
                                    (rx/map #(conj current %)))))
-                (rx/mapcat (partial resize shape initial-position resizing-shapes))
+                (rx/mapcat (partial resize shape initial-position resizing-shapes layout))
                (rx/take-until stoper))
           (rx/of (apply-modifiers ids)
                  (finish-transform))))))))
--- a/frontend/src/app/main/ui/workspace/header.cljs
+++ b/frontend/src/app/main/ui/workspace/header.cljs
@ -218,6 +218,13 @@
           (tr "workspace.header.menu.enable-dynamic-alignment"))]
        [:span.shortcut (sc/get-tooltip :toggle-alignment)]]

+       [:li {:on-click #(st/emit! (dw/toggle-layout-flags :scale-text))}
+        [:span
+         (if (contains? layout :scale-text)
+           (tr "workspace.header.menu.disable-scale-text")
+           (tr "workspace.header.menu.enable-scale-text"))]
+        [:span.shortcut (sc/get-tooltip :toggle-scale-text)]]
+
       (if (:is-shared file)
         [:li {:on-click on-remove-shared}
          [:span (tr "dashboard.remove-shared")]]
--- a/frontend/translations/en.po
+++ b/frontend/translations/en.po
@ -1611,6 +1611,10 @@ msgstr "Radial gradient"
 msgid "workspace.header.menu.disable-dynamic-alignment"
 msgstr "Disable dynamic alignment"

+#: src/app/main/ui/workspace/header.cljs
+msgid "workspace.header.menu.disable-scale-text"
+msgstr "Disable scale text"
+
 #: src/app/main/ui/workspace/header.cljs
 msgid "workspace.header.menu.disable-snap-grid"
 msgstr "Disable snap to grid"
@ -1619,6 +1623,10 @@ msgstr "Disable snap to grid"
 msgid "workspace.header.menu.enable-dynamic-alignment"
 msgstr "Enable dynamic aligment"

+#: src/app/main/ui/workspace/header.cljs
+msgid "workspace.header.menu.enable-scale-text"
+msgstr "Enable scale text"
+
 #: src/app/main/ui/workspace/header.cljs
 msgid "workspace.header.menu.enable-snap-grid"
 msgstr "Snap to grid"
--- a/frontend/translations/es.po
+++ b/frontend/translations/es.po
@ -1614,6 +1614,10 @@ msgstr "Degradado radial"
 msgid "workspace.header.menu.disable-dynamic-alignment"
 msgstr "Desactivar alineamiento dinámico"

+#: src/app/main/ui/workspace/header.cljs
+msgid "workspace.header.menu.disable-scale-text"
+msgstr "Desactivar escalar texto"
+
 #: src/app/main/ui/workspace/header.cljs
 msgid "workspace.header.menu.disable-snap-grid"
 msgstr "Desactivar alinear a la rejilla"
@ -1622,6 +1626,10 @@ msgstr "Desactivar alinear a la rejilla"
 msgid "workspace.header.menu.enable-dynamic-alignment"
 msgstr "Activar alineamiento dinámico"

+#: src/app/main/ui/workspace/header.cljs
+msgid "workspace.header.menu.enable-scale-text"
+msgstr "Activar escalar texto"
+
 #: src/app/main/ui/workspace/header.cljs
 msgid "workspace.header.menu.enable-snap-grid"
 msgstr "Alinear a la rejilla"