From ee9a42238d79e79cbd033ab69381d95938a437fb Mon Sep 17 00:00:00 2001 From: Andres Gonzalez Date: Wed, 16 Jul 2025 15:01:29 +0200 Subject: [PATCH] :sparkles: Switch auto-width to auto-height on horizontal resize on text shapes --- CHANGES.md | 1 + .../app/main/data/workspace/modifiers.cljs | 22 ++++++++++++++++++ .../app/main/data/workspace/transforms.cljs | 23 +++++++++++-------- 3 files changed, 37 insertions(+), 9 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index f215815dd6..1419e860e8 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -24,6 +24,7 @@ - New typography token type - font size token [Taiga #10938](https://tree.taiga.io/project/penpot/us/10938) - Hide bounding box while editing visual effects [Taiga #11576](https://tree.taiga.io/project/penpot/issue/11576) - Improved text layer resizing: Allow double-click on text bounding box to set auto-width/auto-height [Taiga #11577](https://tree.taiga.io/project/penpot/issue/11577) +- Improve text layer auto-resize: auto-width switches to auto-height on horizontal resize, and only switches to fixed on vertical resize [Taiga #11578](https://tree.taiga.io/project/penpot/issue/11578) ### :bug: Bugs fixed diff --git a/frontend/src/app/main/data/workspace/modifiers.cljs b/frontend/src/app/main/data/workspace/modifiers.cljs index b83085e354..51ad4d7e4d 100644 --- a/frontend/src/app/main/data/workspace/modifiers.cljs +++ b/frontend/src/app/main/data/workspace/modifiers.cljs @@ -847,3 +847,25 @@ (if undo-transation? (rx/of (dwu/commit-undo-transaction undo-id)) (rx/empty)))))))) + +;; Pure function to determine next grow-type for text layers +(defn next-grow-type [current-grow-type resize-direction] + (cond + (= current-grow-type :fixed) + :fixed + + (and (= resize-direction :horizontal) + (= current-grow-type :auto-width)) + :auto-height + + (and (= resize-direction :horizontal) + (= current-grow-type :auto-height)) + :auto-height + + (and (= resize-direction :vertical) + (or (= current-grow-type :auto-width) + (= current-grow-type :auto-height))) + :fixed + + :else + current-grow-type)) diff --git a/frontend/src/app/main/data/workspace/transforms.cljs b/frontend/src/app/main/data/workspace/transforms.cljs index c088b3aa55..01b77c94df 100644 --- a/frontend/src/app/main/data/workspace/transforms.cljs +++ b/frontend/src/app/main/data/workspace/transforms.cljs @@ -218,16 +218,23 @@ (gpt/add resize-origin displacement) resize-origin) + ;; Determine resize direction for grow-type logic + resize-direction (cond + (or (= handler :left) (= handler :right)) :horizontal + (or (= handler :top) (= handler :bottom)) :vertical + :else nil) + + ;; Calculate new grow-type for text layers + new-grow-type (when (cfh/text-shape? shape) + (dwm/next-grow-type (dm/get-prop shape :grow-type) resize-direction)) + ;; When the horizontal/vertical scale a flex children with auto/fill ;; we change it too fixed change-width? (not (mth/close? (dm/get-prop scalev :x) 1)) change-height? - (not (mth/close? (dm/get-prop scalev :y) 1)) - - auto-width-text? (and (cfh/text-shape? shape) (= :auto-width (dm/get-prop shape :grow-type))) - auto-height-text? (and (cfh/text-shape? shape) (= :auto-height (dm/get-prop shape :grow-type)))] + (not (mth/close? (dm/get-prop scalev :y) 1))] (cond-> (ctm/empty) (some? displacement) @@ -242,11 +249,9 @@ ^boolean change-height? (ctm/change-property :layout-item-v-sizing :fix) - (and auto-width-text? (or change-width? change-height?)) - (ctm/change-property :grow-type :fixed) - - (and auto-height-text? change-height?) - (ctm/change-property :grow-type :fixed) + ;; Set grow-type if it should change + (and new-grow-type (not= new-grow-type (dm/get-prop shape :grow-type))) + (ctm/change-property :grow-type new-grow-type) ^boolean scale-text (ctm/scale-content (dm/get-prop scalev :x)))))