From abbfd44534c3db0a105b65ba10d413afdac558af Mon Sep 17 00:00:00 2001 From: Alejandro Alonso Date: Tue, 15 Jul 2025 12:00:34 +0200 Subject: [PATCH] :sparkles: Hide bounding box while editing visual effects --- CHANGES.md | 1 + .../workspace/sidebar/options/menus/blur.cljs | 13 ++++-- .../workspace/sidebar/options/menus/fill.cljs | 3 ++ .../sidebar/options/menus/layer.cljs | 16 ++++--- .../sidebar/options/menus/shadow.cljs | 45 ++++++++++++++++--- .../sidebar/options/menus/stroke.cljs | 13 ++++++ 6 files changed, 76 insertions(+), 15 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index e53755469f..04fd486e51 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -19,6 +19,7 @@ - Provide CSS `mix-blend-mode` property in code editor when present on shape [Taiga #11282](https://tree.taiga.io/project/penpot/issue/11282) - 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) ### :bug: Bugs fixed - Copying font size does not copy the unit [Taiga #11143](https://tree.taiga.io/project/penpot/issue/11143) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.cljs index 99a024cc89..bbc6b7f0da 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.cljs @@ -8,6 +8,7 @@ (:require-macros [app.main.style :as stl]) (:require [app.common.uuid :as uuid] + [app.main.data.workspace :as udw] [app.main.data.workspace.shapes :as dwsh] [app.main.store :as st] [app.main.ui.components.numeric-input :refer [numeric-input*]] @@ -49,20 +50,23 @@ handle-add (mf/use-fn - (mf/deps change!) + (mf/deps change! ids) (fn [] + (st/emit! (udw/trigger-bounding-box-cloaking ids)) (change! #(assoc % :blur (create-blur))))) handle-delete (mf/use-fn - (mf/deps change!) + (mf/deps change! ids) (fn [] + (st/emit! (udw/trigger-bounding-box-cloaking ids)) (change! #(dissoc % :blur)))) handle-change (mf/use-fn - (mf/deps change!) + (mf/deps change! ids) (fn [value] + (st/emit! (udw/trigger-bounding-box-cloaking ids)) (change! #(cond-> % (not (contains? % :blur)) (assoc :blur (create-blur)) @@ -72,8 +76,9 @@ handle-toggle-visibility (mf/use-fn - (mf/deps change!) + (mf/deps change! ids) (fn [] + (st/emit! (udw/trigger-bounding-box-cloaking ids)) (change! #(update-in % [:blur :hidden] not))))] [:div {:class (stl/css :element-set)} diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs index b0da7edeb0..fd39a007ed 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs @@ -11,6 +11,7 @@ [app.common.types.fill :as types.fill] [app.common.types.shape.attrs :refer [default-color]] [app.config :as cfg] + [app.main.data.workspace :as udw] [app.main.data.workspace.colors :as dc] [app.main.store :as st] [app.main.ui.components.title-bar :refer [title-bar]] @@ -114,6 +115,7 @@ (mf/deps ids multiple? empty-fills?) (fn [_] (when can-add-fills? + (st/emit! (udw/trigger-bounding-box-cloaking ids)) (st/emit! (dc/add-fill ids {:color default-color :opacity 1})) (when (or multiple? empty-fills?) @@ -124,6 +126,7 @@ (mf/deps ids) (fn [color index] (let [color (select-keys color ctc/color-attrs)] + (st/emit! (udw/trigger-bounding-box-cloaking ids)) (st/emit! (dc/change-fill ids color index))))) on-reorder diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs index ed50c6fd66..4af557679b 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs @@ -90,6 +90,7 @@ (wasm.api/use-shape (:id shape)) (wasm.api/set-shape-blend-mode value))) + (st/emit! (dw/trigger-bounding-box-cloaking ids)) (st/emit! (dw/set-preview-blend-mode ids value)))) handle-blend-mode-leave @@ -101,33 +102,38 @@ handle-opacity-change (mf/use-fn - (mf/deps on-change) + (mf/deps on-change ids) (fn [value] + (st/emit! (dw/trigger-bounding-box-cloaking ids)) (let [value (/ value 100)] (on-change :opacity value)))) handle-set-hidden (mf/use-fn - (mf/deps on-change) + (mf/deps on-change ids) (fn [_] + (st/emit! (dw/trigger-bounding-box-cloaking ids)) (on-change :hidden true))) handle-set-visible (mf/use-fn - (mf/deps on-change) + (mf/deps on-change ids) (fn [_] + (st/emit! (dw/trigger-bounding-box-cloaking ids)) (on-change :hidden false))) handle-set-blocked (mf/use-fn - (mf/deps on-change) + (mf/deps on-change ids) (fn [_] + (st/emit! (dw/trigger-bounding-box-cloaking ids)) (on-change :blocked true))) handle-set-unblocked (mf/use-fn - (mf/deps on-change) + (mf/deps on-change ids) (fn [_] + (st/emit! (dw/trigger-bounding-box-cloaking ids)) (on-change :blocked false))) options diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs index fb71cb2d39..6df60e9d20 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs @@ -12,6 +12,7 @@ [app.common.data.macros :as dm] [app.common.types.shape.shadow :as ctss] [app.common.uuid :as uuid] + [app.main.data.workspace :as dw] [app.main.data.workspace.colors :as dc] [app.main.data.workspace.shapes :as dwsh] [app.main.data.workspace.undo :as dwu] @@ -80,31 +81,56 @@ (mf/use-fn (mf/deps index) #(on-remove index)) on-update-offset-x - (mf/use-fn (mf/deps index) #(on-update index :offset-x %)) + (mf/use-fn + (mf/deps index) + (fn [value] + (st/emit! (dw/trigger-bounding-box-cloaking [shadow-id])) + (on-update index :offset-x value))) on-update-offset-y - (mf/use-fn (mf/deps index) #(on-update index :offset-y %)) + (mf/use-fn + (mf/deps index) + (fn [value] + (st/emit! (dw/trigger-bounding-box-cloaking [shadow-id])) + (on-update index :offset-y value))) on-update-spread - (mf/use-fn (mf/deps index) #(on-update index :spread %)) + (mf/use-fn + (mf/deps index) + (fn [value] + (st/emit! (dw/trigger-bounding-box-cloaking [shadow-id])) + (on-update index :spread value))) on-update-blur - (mf/use-fn (mf/deps index) #(on-update index :blur %)) + (mf/use-fn + (mf/deps index) + (fn [value] + (st/emit! (dw/trigger-bounding-box-cloaking [shadow-id])) + (on-update index :blur value))) on-update-color (mf/use-fn (mf/deps index on-update) (fn [color] + (st/emit! (dw/trigger-bounding-box-cloaking [shadow-id])) (on-update index :color color))) on-detach-color (mf/use-fn (mf/deps index) #(on-detach-color index)) on-style-change - (mf/use-fn (mf/deps index) #(on-update index :style (keyword %))) + (mf/use-fn + (mf/deps index) + (fn [value] + (st/emit! (dw/trigger-bounding-box-cloaking [shadow-id])) + (on-update index :style (keyword value)))) on-toggle-visibility - (mf/use-fn (mf/deps index) #(on-toggle-visibility index)) + (mf/use-fn + (mf/deps index) + (fn [] + (st/emit! (dw/trigger-bounding-box-cloaking [shadow-id])) + (on-toggle-visibility index))) on-toggle-open (mf/use-fn @@ -242,18 +268,21 @@ (mf/use-fn (fn [] (let [ids (mf/ref-val ids-ref)] + (st/emit! (dw/trigger-bounding-box-cloaking ids)) (st/emit! (dwsh/update-shapes ids #(dissoc % :shadow)))))) handle-reorder (mf/use-fn (fn [new-index index] (let [ids (mf/ref-val ids-ref)] + (st/emit! (dw/trigger-bounding-box-cloaking ids)) (st/emit! (dc/reorder-shadows ids index new-index))))) on-add-shadow (mf/use-fn (fn [] (let [ids (mf/ref-val ids-ref)] + (st/emit! (dw/trigger-bounding-box-cloaking ids)) (st/emit! (dc/add-shadow ids (create-shadow)))))) on-detach-color @@ -261,18 +290,22 @@ (fn [index] (let [ids (mf/ref-val ids-ref) f #(update-in % [:shadow index :color] dissoc :id :file-id :ref-id :ref-file)] + (st/emit! (dw/trigger-bounding-box-cloaking ids)) (st/emit! (dwsh/update-shapes ids f))))) on-toggle-visibility (mf/use-fn (fn [index] (let [ids (mf/ref-val ids-ref)] + (st/emit! (dw/trigger-bounding-box-cloaking ids)) (st/emit! (dwsh/update-shapes ids #(update-in % [:shadow index :hidden] not)))))) on-remove (mf/use-fn + (mf/deps ids) (fn [index] (let [ids (mf/ref-val ids-ref)] + (st/emit! (dw/trigger-bounding-box-cloaking ids)) (st/emit! (dwsh/update-shapes ids #(update % :shadow remove-shadow-by-index index)))))) on-update diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs index ba9c4d7ef4..b513bdc190 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs @@ -10,6 +10,7 @@ [app.common.colors :as clr] [app.common.data :as d] [app.common.data.macros :as dm] + [app.main.data.workspace :as udw] [app.main.data.workspace.colors :as dc] [app.main.store :as st] [app.main.ui.components.title-bar :refer [title-bar]] @@ -56,6 +57,7 @@ (mf/use-fn (mf/deps ids) (fn [index color] + (st/emit! (udw/trigger-bounding-box-cloaking ids)) (st/emit! (dc/change-stroke-color ids color index)))) @@ -63,18 +65,21 @@ (mf/use-fn (mf/deps ids) (fn [index] + (st/emit! (udw/trigger-bounding-box-cloaking ids)) (st/emit! (dc/remove-stroke ids index)))) handle-remove-all (mf/use-fn (mf/deps ids) (fn [_] + (st/emit! (udw/trigger-bounding-box-cloaking ids)) (st/emit! (dc/remove-all-strokes ids)))) on-color-detach (mf/use-fn (mf/deps ids) (fn [index color] + (st/emit! (udw/trigger-bounding-box-cloaking ids)) (let [color (-> color (dissoc :ref-id :ref-file))] (st/emit! (dc/change-stroke-color ids color index))))) @@ -84,22 +89,26 @@ (mf/deps ids) (fn [new-index] (fn [index] + (st/emit! (udw/trigger-bounding-box-cloaking ids)) (st/emit! (dc/reorder-strokes ids index new-index))))) on-stroke-style-change (mf/use-fn (mf/deps ids) (fn [index value] + (st/emit! (udw/trigger-bounding-box-cloaking ids)) (st/emit! (dc/change-stroke-attrs ids {:stroke-style value} index)))) on-stroke-alignment-change (fn [index value] (when-not (str/empty? value) + (st/emit! (udw/trigger-bounding-box-cloaking ids)) (st/emit! (dc/change-stroke-attrs ids {:stroke-alignment value} index)))) on-stroke-width-change (fn [index value] (when-not (str/empty? value) + (st/emit! (udw/trigger-bounding-box-cloaking ids)) (st/emit! (dc/change-stroke-attrs ids {:stroke-width value} index)))) open-caps-select @@ -128,10 +137,12 @@ on-stroke-cap-start-change (fn [index value] + (st/emit! (udw/trigger-bounding-box-cloaking ids)) (st/emit! (dc/change-stroke-attrs ids {:stroke-cap-start value} index))) on-stroke-cap-end-change (fn [index value] + (st/emit! (udw/trigger-bounding-box-cloaking ids)) (st/emit! (dc/change-stroke-attrs ids {:stroke-cap-end value} index))) on-stroke-cap-switch @@ -140,10 +151,12 @@ stroke-cap-end (get-in values [:strokes index :stroke-cap-end])] (when (and (not= stroke-cap-start :multiple) (not= stroke-cap-end :multiple)) + (st/emit! (udw/trigger-bounding-box-cloaking ids)) (st/emit! (dc/change-stroke-attrs ids {:stroke-cap-start stroke-cap-end :stroke-cap-end stroke-cap-start} index))))) on-add-stroke (fn [_] + (st/emit! (udw/trigger-bounding-box-cloaking ids)) (st/emit! (dc/add-stroke ids {:stroke-alignment :inner :stroke-style :solid :stroke-color clr/black