Merge pull request #925 from penpot/resize-text

Resize text

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))}
@@ -155,8 +159,8 @@
                         :command "c"
                         :fn #(st/emit! (dwd/select-for-drawing :comments))}
 
-   :insert-image       {:tooltip "K"
+   :insert-image       {:tooltip (ds/shift "K")
-                        :command "k"
+                        :command "shift+k"
                         :fn #(-> "image-upload" dom/get-element dom/click)}
 
    :copy               {:tooltip (ds/meta "C")

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/src/app/main/ui/workspace/left_toolbar.cljs

@@ -45,7 +45,7 @@
              (st/emit! (dw/upload-media-workspace params)))))]
 
        [:li.tooltip.tooltip-right
-        {:alt (tr "workspace.toolbar.image")
+        {:alt (tr "workspace.toolbar.image" (sc/get-tooltip :insert-image))
          :on-click on-click}
         [:*
          i/image

frontend/translations/de.po

@@ -2250,15 +2250,15 @@ msgstr "Stift (%s)"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.toolbar.ellipse"
-msgstr "Ellipse (E)"
+msgstr "Ellipse (%s)"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.toolbar.frame"
-msgstr "Zeichenfläche (A)"
+msgstr "Zeichenfläche (%s)"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.toolbar.image"
-msgstr "Bild (K)"
+msgstr "Bild (%s)"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.toolbar.move"
@@ -2266,15 +2266,15 @@ msgstr "Verschieben"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.toolbar.path"
-msgstr "Pfad (P)"
+msgstr "Pfad (%s)"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.toolbar.rect"
-msgstr "Rechteck (R)"
+msgstr "Rechteck (%s)"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.toolbar.text"
-msgstr "Text (T)"
+msgstr "Text (%s)"
 
 #: src/app/main/ui/workspace/sidebar/history.cljs
 msgid "workspace.undo.empty"
@@ -2404,4 +2404,4 @@ msgid "workspace.updates.update"
 msgstr "Aktualisieren"
 
 msgid "workspace.viewport.click-to-close-path"
-msgstr "Klicken Sie, um den Pfad zu schließen"
+msgstr "Klicken Sie, um den Pfad zu schließen"

frontend/translations/el.po

@@ -2204,15 +2204,15 @@ msgstr "Στροφή  (%s)"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.toolbar.ellipse"
-msgstr "Έλλειψη (Ε)"
+msgstr "Έλλειψη (%s)"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.toolbar.frame"
-msgstr "Artboard (Α)"
+msgstr "Artboard (%s)"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.toolbar.image"
-msgstr "Εικόνα (Κ)"
+msgstr "Εικόνα (%s)"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.toolbar.move"
@@ -2220,15 +2220,15 @@ msgstr ""
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.toolbar.path"
-msgstr "Path (Ρ)"
+msgstr "Path (%s)"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.toolbar.rect"
-msgstr "Ορθογώνιο (R)"
+msgstr "Ορθογώνιο (%s)"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.toolbar.text"
-msgstr "Κείμενο (Τ)"
+msgstr "Κείμενο (%s)"
 
 #: src/app/main/ui/workspace/sidebar/history.cljs
 msgid "workspace.undo.empty"
@@ -2358,4 +2358,4 @@ msgid "workspace.updates.update"
 msgstr "Ενημέρωση"
 
 msgid "workspace.viewport.click-to-close-path"
-msgstr "Κάντε κλικ για να κλείσετε τη διαδρομή"
+msgstr "Κάντε κλικ για να κλείσετε τη διαδρομή"

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"
@@ -2417,15 +2425,15 @@ msgstr "Curve (%s)"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.toolbar.ellipse"
-msgstr "Ellipse (E)"
+msgstr "Ellipse (%s)"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.toolbar.frame"
-msgstr "Artboard (A)"
+msgstr "Artboard (%s)"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.toolbar.image"
-msgstr "Image (K)"
+msgstr "Image (%s)"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.toolbar.move"
@@ -2433,15 +2441,15 @@ msgstr "Move"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.toolbar.path"
-msgstr "Path (P)"
+msgstr "Path (%s)"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.toolbar.rect"
-msgstr "Rectangle (R)"
+msgstr "Rectangle (%s)"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.toolbar.text"
-msgstr "Text (T)"
+msgstr "Text (%s)"
 
 #: src/app/main/ui/workspace/sidebar/history.cljs
 msgid "workspace.undo.empty"
@@ -2571,4 +2579,4 @@ msgid "workspace.updates.update"
 msgstr "Update"
 
 msgid "workspace.viewport.click-to-close-path"
-msgstr "Click to close the path"
+msgstr "Click to close the path"

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"
@@ -2422,15 +2430,15 @@ msgstr "Curva (%s)"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.toolbar.ellipse"
-msgstr "Elipse (E)"
+msgstr "Elipse (%s)"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.toolbar.frame"
-msgstr "Tablero (A)"
+msgstr "Tablero (%s)"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.toolbar.image"
-msgstr "Imagen (K)"
+msgstr "Imagen (%s)"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.toolbar.move"
@@ -2438,15 +2446,15 @@ msgstr "Mover"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.toolbar.path"
-msgstr "Ruta (P)"
+msgstr "Ruta (%s)"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.toolbar.rect"
-msgstr "Rectángulo (R)"
+msgstr "Rectángulo (%s)"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.toolbar.text"
-msgstr "Texto (T)"
+msgstr "Texto (%s)"
 
 #: src/app/main/ui/workspace/sidebar/history.cljs
 msgid "workspace.undo.empty"

frontend/translations/fr.po

@@ -2036,15 +2036,15 @@ msgstr "Courbe (%s)"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.toolbar.ellipse"
-msgstr "Ellipse (E)"
+msgstr "Ellipse (%s)"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.toolbar.frame"
-msgstr "Plan de travail (A)"
+msgstr "Plan de travail (%s)"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.toolbar.image"
-msgstr "Image (K)"
+msgstr "Image (%s)"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.toolbar.move"
@@ -2052,15 +2052,15 @@ msgstr "Déplacer"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.toolbar.path"
-msgstr "Chemin (P)"
+msgstr "Chemin (%s)"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.toolbar.rect"
-msgstr "Rectangle (R)"
+msgstr "Rectangle (%s)"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.toolbar.text"
-msgstr "Texte (T)"
+msgstr "Texte (%s)"
 
 #: src/app/main/ui/workspace/sidebar/history.cljs
 msgid "workspace.undo.empty"
@@ -2190,4 +2190,4 @@ msgid "workspace.updates.update"
 msgstr "Actualiser"
 
 msgid "workspace.viewport.click-to-close-path"
-msgstr "Cliquez pour fermer le chemin"
+msgstr "Cliquez pour fermer le chemin"

frontend/translations/ru.po

@@ -1146,11 +1146,11 @@ msgstr ""
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.toolbar.frame"
-msgstr "Рабочая область (A)"
+msgstr "Рабочая область (%s)"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.toolbar.image"
-msgstr "Изображение (K)"
+msgstr "Изображение (%s)"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.toolbar.move"
@@ -1158,15 +1158,15 @@ msgstr "Вытеснить"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.toolbar.path"
-msgstr "Линия (P)"
+msgstr "Линия (%s)"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.toolbar.rect"
-msgstr "Прямоугольник (R)"
+msgstr "Прямоугольник (%s)"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.toolbar.text"
-msgstr "Текст (T)"
+msgstr "Текст (%s)"
 
 #: src/app/main/data/workspace/libraries.cljs
 msgid "workspace.updates.dismiss"
@@ -1181,4 +1181,4 @@ msgid "workspace.updates.update"
 msgstr ""
 
 msgid "workspace.viewport.click-to-close-path"
-msgstr "Кликни чтобы закончить фигуру"
+msgstr "Кликни чтобы закончить фигуру"

frontend/translations/zh_cn.po

@@ -2066,15 +2066,15 @@ msgstr "曲线（%s）"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.toolbar.ellipse"
-msgstr "椭圆（E）"
+msgstr "椭圆（%s）"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.toolbar.frame"
-msgstr "画板（A）"
+msgstr "画板（%s）"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.toolbar.image"
-msgstr "图片（K）"
+msgstr "图片（%s）"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.toolbar.move"
@@ -2082,15 +2082,15 @@ msgstr "移动"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.toolbar.path"
-msgstr "路径（P）"
+msgstr "路径（%s）"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.toolbar.rect"
-msgstr "矩形（R）"
+msgstr "矩形（%s）"
 
 #: src/app/main/ui/workspace/left_toolbar.cljs
 msgid "workspace.toolbar.text"
-msgstr "文本（T）"
+msgstr "文本（%s）"
 
 #: src/app/main/ui/workspace/sidebar/history.cljs
 msgid "workspace.undo.empty"
@@ -2220,4 +2220,4 @@ msgid "workspace.updates.update"
 msgstr "更新"
 
 msgid "workspace.viewport.click-to-close-path"
-msgstr "单击以闭合路径"
+msgstr "单击以闭合路径"