🎉 Add resize scale for texts

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)

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

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

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]

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

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

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")]]

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"

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"