diff --git a/CHANGES.md b/CHANGES.md index ed2f153eb3..8cf2d6b8a6 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -23,6 +23,7 @@ - Add the option to import tokens in a .zip file. [Taiga #11378](https://tree.taiga.io/project/penpot/us/11378) - 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) ### :bug: Bugs fixed diff --git a/frontend/src/app/main/ui/workspace/viewport/selection.cljs b/frontend/src/app/main/ui/workspace/viewport/selection.cljs index d5e6f44284..9cd2a10c3c 100644 --- a/frontend/src/app/main/ui/workspace/viewport/selection.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/selection.cljs @@ -16,6 +16,7 @@ [app.common.types.container :as ctn] [app.common.types.shape :as cts] [app.main.data.workspace :as dw] + [app.main.data.workspace.shapes :as dwsh] [app.main.refs :as refs] [app.main.store :as st] [app.main.ui.context :as ctx] @@ -277,7 +278,7 @@ ;; The side handler is always rendered horizontally and then rotated (mf/defc resize-side-handler {::mf/wrap-props false} - [{:keys [x y length align angle zoom position rotation transform on-resize color show-handler scale-text]}] + [{:keys [x y length align angle zoom position rotation transform on-resize color show-handler scale-text shape-id shape-type]}] (let [height (/ resize-side-height zoom) offset-y (if (= align :outside) (- height) (- (/ height 2))) target-y (+ y offset-y) @@ -289,8 +290,14 @@ (cur/get-dynamic "resize-ew" rotation)) (if ^boolean scale-text (cur/get-dynamic "scale-ns" rotation) - (cur/get-dynamic "resize-ns" rotation)))] - + (cur/get-dynamic "resize-ns" rotation))) + on-double-click (fn [_] + (when (= shape-type :text) + (cond + (= position :right) + (st/emit! (dwsh/update-shapes [shape-id] #(assoc % :grow-type :auto-width))) + (= position :bottom) + (st/emit! (dwsh/update-shapes [shape-id] #(assoc % :grow-type :auto-height))))))] [:g.resize-handler (when ^boolean show-handler [:circle {:r (/ resize-point-radius zoom) @@ -311,6 +318,7 @@ :data-position (name position) :transform transform-str :on-pointer-down on-resize + :on-double-click on-double-click :style {:fill (if (dbg/enabled? :handlers) "yellow" "none") :stroke-width 0}}]])) @@ -399,7 +407,9 @@ :on-resize on-resize :transform transform :rotation rotation - :color color} + :color color + :shape-id (dm/get-prop shape :id) + :shape-type (dm/get-prop shape :type)} props)] (case type :rotation [:> rotation-handler props] @@ -482,16 +492,36 @@ {::mf/private true} [{:keys [shape zoom color disabled]}] (let [shape-id (dm/get-prop shape :id) + grow-type (dm/get-prop shape :grow-type) + shape-type (dm/get-prop shape :type) on-resize (mf/use-fn - (mf/deps shape-id shape) + (mf/deps shape-id shape grow-type shape-type) (fn [event] (when (dom/left-mouse? event) (dom/stop-propagation event) (let [target (dom/get-current-target event) position (-> (dom/get-data target "position") (keyword))] + (cond + ;; If text and in auto-width and the resize is horizontal, switch to auto-height and mark direction + (and (= shape-type :text) + (= grow-type :auto-width) + (or (= position :right) (= position :left))) + (st/emit! (dwsh/update-shapes [shape-id] #(-> % (assoc :grow-type :auto-height) (assoc :last-resize-direction :horizontal)))) + ;; If text and in auto-height and the resize is horizontal, mark direction but do not change grow-type + (and (= shape-type :text) + (= grow-type :auto-height) + (or (= position :right) (= position :left))) + (st/emit! (dwsh/update-shapes [shape-id] #(assoc % :last-resize-direction :horizontal))) + ;; If text and in auto-height and the resize is vertical, mark direction + (and (= shape-type :text) + (= grow-type :auto-height) + (or (= position :top) (= position :bottom))) + (st/emit! (dwsh/update-shapes [shape-id] #(assoc % :last-resize-direction :vertical))) + :else + nil) (st/emit! (dw/start-resize position #{shape-id} shape)))))) on-rotate