🐛 Fix add fill to artboard modify children

CHANGES.md

@@ -44,6 +44,7 @@
 ### :bug: Bugs fixed
 
 - Fix duplicate multi selected elements [Taiga #3155](https://tree.taiga.io/project/penpot/issue/3155)
+- Fix add fills to artboard modify children [Taiga #3151](https://tree.taiga.io/project/penpot/issue/3151)
 - Avoid numeric inputs to allow big numbers [Taiga #2858](https://tree.taiga.io/project/penpot/issue/2858)
 - Fix component contex menu size [Taiga #2480](https://tree.taiga.io/project/penpot/issue/2480)
 - Add shadow to artboard make it lose the fill [Taiga #3139](https://tree.taiga.io/project/penpot/issue/3139)

frontend/src/app/main/data/workspace/colors.cljs

@@ -8,12 +8,14 @@
   (:require
    [app.common.colors :as clr]
    [app.common.data :as d]
+   [app.common.pages.helpers :as cph]
    [app.main.data.modal :as md]
    [app.main.data.workspace.changes :as dch]
    [app.main.data.workspace.layout :as layout]
    [app.main.data.workspace.state-helpers :as wsh]
    [app.main.data.workspace.texts :as dwt]
    [app.main.repo :as rp]
+   [app.util.color :as uc]
    [beicon.core :as rx]
    [potok.core :as ptk]))
 
@@ -179,12 +181,12 @@
   (ptk/reify ::change-fill
     ptk/WatchEvent
     (watch [_ state _]
-      (let [change (fn [shape attrs]
+      (let [change-fn (fn [shape attrs]
                      (-> shape
                          (cond-> (not (contains? shape :fills))
                            (assoc :fills []))
                          (assoc-in [:fills position] (into {} attrs))))]
-        (transform-fill state ids color change)))))
+        (transform-fill state ids color change-fn)))))
 
 (defn change-fill-and-clear
   [ids color]
@@ -390,3 +392,24 @@
     (update [_ state]
       (-> state
           (assoc-in [:workspace-global :editing-stop] spot)))))
+
+(defn apply-color-from-palette
+  [color is-alt?]
+  (ptk/reify ::apply-color-from-palette
+    ptk/WatchEvent
+    (watch [_ state _]
+      (let [objects  (wsh/lookup-page-objects state)
+            selected (->> (wsh/lookup-selected state)
+                          (cph/clean-loops objects))
+            selected-obj (keep (d/getf objects) selected)
+            select-shapes-for-color (fn [shape objects]
+                                      (let [shapes (case (:type shape)
+                                                     :group (cph/get-children objects (:id shape))
+                                                     [shape])]
+                                        (->> shapes
+                                             (remove cph/group-shape?)
+                                             (map :id))))
+            ids (mapcat #(select-shapes-for-color % objects) selected-obj)]
+        (if is-alt?
+          (rx/of (change-stroke ids (merge uc/empty-color color) 0))
+          (rx/of (change-fill ids (merge uc/empty-color color) 0)))))))

frontend/src/app/main/ui/workspace/colorpalette.cljs

@@ -13,7 +13,6 @@
    [app.main.ui.components.dropdown :refer [dropdown]]
    [app.main.ui.hooks.resize :refer [use-resize-hook]]
    [app.main.ui.icons :as i]
-   [app.util.color :as uc]
    [app.util.dom :as dom]
    [app.util.i18n :refer [tr]]
    [app.util.keyboard :as kbd]
@@ -40,12 +39,9 @@
 ;; --- Components
 (mf/defc palette-item
   [{:keys [color]}]
-  (let [ids-with-children (map :id (mf/deref refs/selected-shapes-with-children))
-        select-color
+  (let [select-color
         (fn [event]
-          (if (kbd/alt? event)
-              (st/emit! (mdc/change-stroke ids-with-children (merge uc/empty-color color) 0))
-              (st/emit! (mdc/change-fill ids-with-children (merge uc/empty-color color) 0))))]
+          (st/emit! (mdc/apply-color-from-palette color (kbd/alt? event))))]
 
     [:div.color-cell {:on-click select-color}
      [:& cb/color-bullet {:color color}]