✨ Hide bounding box while editing visual effects

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)

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

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

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

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

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