From 4c48f34d6163b4c055e479be4605bd575dedf7f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s=20Moya?= <andres.moya@kaleidos.net>
Date: Tue, 4 May 2021 09:59:21 +0200
Subject: [PATCH] :tada: Add resize scale for texts

---
 CHANGES.md                                    |  3 +++
 common/app/common/geom/shapes/transforms.cljc | 22 ++++++++++++++++++-
 frontend/src/app/main/data/workspace.cljs     |  1 +
 .../src/app/main/data/workspace/drawing.cljs  |  7 +++++-
 .../app/main/data/workspace/shortcuts.cljs    |  6 ++++-
 .../app/main/data/workspace/transforms.cljs   | 10 +++++++--
 .../src/app/main/ui/workspace/header.cljs     |  7 ++++++
 frontend/translations/en.po                   |  8 +++++++
 frontend/translations/es.po                   |  8 +++++++
 9 files changed, 67 insertions(+), 5 deletions(-)

diff --git a/CHANGES.md b/CHANGES.md
index aecc5d190..5df97e14f 100644
--- 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)
diff --git a/common/app/common/geom/shapes/transforms.cljc b/common/app/common/geom/shapes/transforms.cljc
index cf9845741..dcfdd31fc 100644
--- 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)))
 
diff --git a/frontend/src/app/main/data/workspace.cljs b/frontend/src/app/main/data/workspace.cljs
index eb04c8714..2308d2ca7 100644
--- 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))
diff --git a/frontend/src/app/main/data/workspace/drawing.cljs b/frontend/src/app/main/data/workspace/drawing.cljs
index 553b31038..503d6bee9 100644
--- 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]
diff --git a/frontend/src/app/main/data/workspace/shortcuts.cljs b/frontend/src/app/main/data/workspace/shortcuts.cljs
index 56f1e0d26..64b41594f 100644
--- 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))}
diff --git a/frontend/src/app/main/data/workspace/transforms.cljs b/frontend/src/app/main/data/workspace/transforms.cljs
index e258af8c9..110f5c8c7 100644
--- 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))))))))
diff --git a/frontend/src/app/main/ui/workspace/header.cljs b/frontend/src/app/main/ui/workspace/header.cljs
index 77cd0f51a..309803e9e 100644
--- 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")]]
diff --git a/frontend/translations/en.po b/frontend/translations/en.po
index ad640977e..f3bd4316e 100644
--- 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"
diff --git a/frontend/translations/es.po b/frontend/translations/es.po
index c299f9911..f8f8e956f 100644
--- 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"