0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-04-05 19:41:27 -05:00

Merge pull request #925 from penpot/resize-text

Resize text
This commit is contained in:
Andrey Antukh 2021-05-10 13:40:08 +02:00 committed by GitHub
commit d9a4a8d6de
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 117 additions and 55 deletions

View file

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

View file

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

View file

@ -73,6 +73,7 @@
:rules
:display-grid
:snap-grid
:scale-text
:dynamic-alignment})
(s/def ::layout-flags (s/coll-of ::layout-flag))

View file

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

View file

@ -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"
:command "k"
:insert-image {:tooltip (ds/shift "K")
:command "shift+k"
:fn #(-> "image-upload" dom/get-element dom/click)}
:copy {:tooltip (ds/meta "C")

View file

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

View file

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

View file

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

View file

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

View file

@ -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 "Κάντε κλικ για να κλείσετε τη διαδρομή"

View file

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

View file

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

View file

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

View file

@ -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 "Кликни чтобы закончить фигуру"

View file

@ -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 "单击以闭合路径"