Merge pull request #2959 from penpot/azazeln28-visual-feedback-scale-k

✨ add visual feedback to scale text

CHANGES.md

@@ -7,6 +7,7 @@
 ### :sparkles: New features
 - Adds more accessibility improvements in dashboard [Taiga #4577](https://tree.taiga.io/project/penpot/us/4577)
 - 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
 

frontend/resources/images/cursors/scale-diagonal.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16">
+  <path fill="#fff" d="M10.094.486v2.932h1.435l-8.095 8.107V10.09H2.133v-.004H.486v5.428h5.43v-1.475h.008v-1.455H4.488l8.096-8.107v1.435h2.93V.486Zm.81.81h3.8v3.806h-.028V1.324h-3.772zm-9.607 9.6h.025v3.78h3.783v.027H1.297v-1.928z" color="#000" paint-order="stroke fill markers" style="-inkscape-stroke:none"/>
+  <path fill="#000" d="M10.5.892v.837h3.771v3.777h.837V.892Zm0 1.476v.644h2.007l-9.48 9.495v-2.011h-.64v3.138h3.131v-.644H3.511l9.48-9.495v2.011h.64V2.368ZM.892 10.492v4.616H5.51v-.837H1.727v-3.779z" color="#000" paint-order="stroke fill markers" style="-inkscape-stroke:none"/>
+</svg>

frontend/resources/images/cursors/scale-h.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" fill="none" viewBox="0 0 16 16">
+  <path fill="#fff" d="m3.785 4.164-.283.29L1.914 6.07.024 8l3.761 3.836 1.026-1.045.005.006 1.002-1.022-1.005-1.027 6.382-.006-1.006 1.026.891.906.111.113 1.026 1.047L15.977 8 12.22 4.17l-.284.287-.742.758-.111.113-.172.176-.719.732L11.2 7.264l-6.385.007L5.82 6.246l-.902-.922.002-.002zm0 1.133.024.025-1.315 1.34-1.31 1.336 2.628 2.68-.025.027L1.135 8 2.48 6.625Zm8.436.006L14.865 8l-2.648 2.701-.026-.027L14.814 8l-2.619-2.672Z" color="#000" paint-order="stroke fill markers" style="-inkscape-stroke:none"/>
+  <path fill="#000" d="m12.221 4.736-.581.593 2.619 2.67-2.624 2.675.582.593L15.422 8zM11.196 5.78l-.447.456 1.394 1.422-8.275.01 1.397-1.424-.445-.454-2.18 2.222 2.175 2.218.447-.455-1.394-1.422 8.275-.011-1.397 1.424.445.454L13.371 8ZM3.784 4.73 2.198 6.348.578 7.999l3.208 3.271.581-.593-2.627-2.68L2.778 6.94l1.587-1.617Z" color="#000" paint-order="stroke fill markers" style="-inkscape-stroke:none"/>
+</svg>

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

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)