From 1758b34eed3622b102d025ec23b7b4245267b56f Mon Sep 17 00:00:00 2001 From: Aitor Date: Mon, 20 Feb 2023 11:30:08 +0100 Subject: [PATCH] :sparkles: add visual feedback to scale text --- CHANGES.md | 1 + .../resources/images/cursors/scale-diagonal.svg | 4 ++++ frontend/resources/images/cursors/scale-h.svg | 4 ++++ frontend/src/app/main/ui/cursors.cljs | 6 ++++++ .../app/main/ui/workspace/viewport/selection.cljs | 14 +++++++++----- 5 files changed, 24 insertions(+), 5 deletions(-) create mode 100644 frontend/resources/images/cursors/scale-diagonal.svg create mode 100644 frontend/resources/images/cursors/scale-h.svg diff --git a/CHANGES.md b/CHANGES.md index 2dc931152..5de908f5f 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -6,6 +6,7 @@ ### :sparkles: New features - Adds paddings and gaps prediction on layout creation [Taiga #4838](https://tree.taiga.io/project/penpot/task/4838) +- Add visual feedback when proportionally scaling text elements with **K** [Taiga #3415](https://tree.taiga.io/project/penpot/us/3415) ### :bug: Bugs fixed diff --git a/frontend/resources/images/cursors/scale-diagonal.svg b/frontend/resources/images/cursors/scale-diagonal.svg new file mode 100644 index 000000000..169c1bce2 --- /dev/null +++ b/frontend/resources/images/cursors/scale-diagonal.svg @@ -0,0 +1,4 @@ + + + + diff --git a/frontend/resources/images/cursors/scale-h.svg b/frontend/resources/images/cursors/scale-h.svg new file mode 100644 index 000000000..4a1e56df7 --- /dev/null +++ b/frontend/resources/images/cursors/scale-h.svg @@ -0,0 +1,4 @@ + + + + diff --git a/frontend/src/app/main/ui/cursors.cljs b/frontend/src/app/main/ui/cursors.cljs index 4a0f323e1..6b4786c58 100644 --- a/frontend/src/app/main/ui/cursors.cljs +++ b/frontend/src/app/main/ui/cursors.cljs @@ -41,6 +41,12 @@ (def rotate (cursor-fn :rotate 90)) (def text (cursor-fn :text 0)) +;; text +(def scale-ew (cursor-fn :scale-h 0)) +(def scale-nesw (cursor-fn :scale-h 45)) +(def scale-ns (cursor-fn :scale-h 90)) +(def scale-nwse (cursor-fn :scale-h 135)) + ;; (def resize-ew-2 (cursor-fn :resize-h-2 0)) (def resize-ns-2 (cursor-fn :resize-h-2 90)) diff --git a/frontend/src/app/main/ui/workspace/viewport/selection.cljs b/frontend/src/app/main/ui/workspace/viewport/selection.cljs index 57fc23d8a..a3977510c 100644 --- a/frontend/src/app/main/ui/workspace/viewport/selection.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/selection.cljs @@ -176,8 +176,11 @@ (mf/defc resize-point-handler [{:keys [cx cy zoom position on-resize transform rotation color align]}] - (let [cursor (if (#{:top-left :bottom-right} position) - (cur/resize-nesw rotation) (cur/resize-nwse rotation)) + (let [layout (mf/deref refs/workspace-layout) + scale-text (:scale-text layout) + cursor (if (#{:top-left :bottom-right} position) + (if scale-text (cur/scale-nesw rotation) (cur/resize-nesw rotation)) + (if scale-text (cur/scale-nwse rotation) (cur/resize-nwse rotation))) {cx' :x cy' :y} (gpt/transform (gpt/point cx cy) transform)] [:g.resize-handler @@ -221,7 +224,8 @@ (let [res-point (if (#{:top :bottom} position) {:y y} {:x x}) - + layout (mf/deref refs/workspace-layout) + scale-text (:scale-text layout) height (/ resize-side-height zoom) offset-y (if (= align :outside) (- height) (- (/ height 2))) target-y (+ y offset-y) @@ -246,8 +250,8 @@ :style {:fill (if (debug? :handlers) "yellow" "none") :stroke-width 0 :cursor (if (#{:left :right} position) - (cur/resize-ew rotation) - (cur/resize-ns rotation)) }}]])) + (if scale-text (cur/scale-ew rotation) (cur/resize-ew rotation)) + (if scale-text (cur/scale-ns rotation) (cur/resize-ns rotation))) }}]])) (defn minimum-selrect [{:keys [x y width height] :as selrect}] (let [final-width (max width min-selrect-side)