🐛 Selected colors doesn't work for shadows

common/src/app/common/spec/shadow.cljc

@@ -15,17 +15,30 @@
 
 (s/def ::id uuid?)
 (s/def ::style #{:drop-shadow :inner-shadow})
-(s/def ::color ::color/color)
 (s/def ::offset-x ::us/safe-number)
 (s/def ::offset-y ::us/safe-number)
 (s/def ::blur ::us/safe-number)
 (s/def ::spread ::us/safe-number)
 (s/def ::hidden boolean?)
 
+
+(s/def ::color string?)
+(s/def ::opacity ::us/safe-number)
+(s/def ::gradient (s/nilable ::color/gradient))
+(s/def ::file-id (s/nilable uuid?))
+(s/def ::ref-id (s/nilable uuid?))
+
+(s/def ::shadow-color
+  (s/keys :opt-un [::color
+                   ::opacity
+                   ::gradient
+                   ::file-id
+                   ::id]))
+
 (s/def ::shadow-props
   (s/keys :req-un [:internal.shadow/id
                    :internal.shadow/style
-                   :internal.shadow/color
+                   ::shadow-color
                    :internal.shadow/offset-x
                    :internal.shadow/offset-y
                    :internal.shadow/blur

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

@@ -281,6 +281,15 @@
                                                           (d/without-nils))]
                                           (assoc-in shape [:strokes index] new-attrs)))))))))
 
+(defn change-shadow
+  [ids attrs index]
+  (ptk/reify ::change-shadow
+    ptk/WatchEvent
+    (watch [_ _ _]
+      (rx/of (dch/update-shapes ids (fn [shape]
+                                      (let [new-attrs (merge (get-in shape [:shadow index :color]) attrs)]
+                                        (assoc-in shape [:shadow index :color] new-attrs))))))))
+
 (defn add-stroke
   [ids stroke]
   (ptk/reify ::add-stroke
@@ -420,6 +429,7 @@
            (rx/map (fn [shape] (case (:prop shape)
                                  :fill (change-fill [(:shape-id shape)] new-color (:index shape))
                                  :stroke (change-stroke [(:shape-id shape)] new-color (:index shape))
+                                 :shadow (change-shadow [(:shape-id shape)] new-color (:index shape))
                                  :content (dwt/update-text-with-function (:shape-id shape) (partial change-text-color old-color new-color (:index shape))))))))))
 
 (defn apply-color-from-palette

frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs

@@ -41,6 +41,18 @@
      :shape-id (:shape-id stroke)
      :index (:index stroke)}))
 
+(defn shadow->color-att
+  [shadow]
+  (let [attrs (d/without-nils {:color    (get-in shadow [:color :color])
+                               :opacity  (get-in shadow [:color :opacity])
+                               :id       (get-in shadow [:color :id])
+                               :file-id  (get-in shadow [:color :file-id])
+                               :gradient (get-in shadow [:color :gradient])})]
+    {:attrs attrs
+     :prop :shadow
+     :shape-id (:shape-id shadow)
+     :index (:index shadow)}))
+
 (defn text->color-att
   [fill]
   (let [attrs (d/without-nils {:color    (:fill-color fill)
@@ -69,15 +81,18 @@
   (reduce
    (fn [list shape]
      (let [fill-obj   (map-indexed #(assoc %2 :shape-id (:id shape) :index %1) (:fills shape))
-           stroke-obj (map-indexed #(assoc %2 :shape-id (:id shape) :index %1) (:strokes shape))]
+           stroke-obj (map-indexed #(assoc %2 :shape-id (:id shape) :index %1) (:strokes shape))
+           shadow-obj (map-indexed #(assoc %2 :shape-id (:id shape) :index %1) (:shadow shape))]
        (if (= :text (:type shape))
          (-> list
              (into (map stroke->color-att) stroke-obj)
+             (into (map shadow->color-att) shadow-obj)
              (into (extract-text-colors shape)))
 
          (-> list
              (into (map fill->color-att)  fill-obj)
-             (into (map stroke->color-att) stroke-obj)))))
+             (into (map stroke->color-att) stroke-obj)
+             (into (map shadow->color-att) shadow-obj)))))
    []
    shapes))
 
@@ -117,7 +132,7 @@
                  shapes-by-color (get @grouped-colors* old-color)]
              (reset! prev-color* new-color)
              (st/emit! (dc/change-color-in-selected new-color shapes-by-color old-color)))))
-        
+
         on-open (mf/use-fn
                  (fn [color]
                    (reset! prev-color* color)))

frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs

@@ -57,7 +57,7 @@
         on-remove-shadow
         (fn [index]
           (fn []
-            (st/emit! (dch/update-shapes ids #(update % :shadow remove-shadow-by-index index) ))))
+            (st/emit! (dch/update-shapes ids #(update % :shadow remove-shadow-by-index index)))))
 
         select-text
         (fn [ref] (fn [_] (dom/select-text! (mf/ref-val ref))))
@@ -78,10 +78,9 @@
         update-color
         (fn [index]
           (fn [color]
-            (let [color (dissoc color :id :file-id :gradient)]
+            (st/emit! (dch/update-shapes
-              (st/emit! (dch/update-shapes
+                       ids
-                         ids
+                       #(assoc-in % [:shadow index :color] color)))))
-                         #(assoc-in % [:shadow index :color] color))))))
 
         detach-color
         (fn [index]
@@ -117,12 +116,12 @@
       ;;                    :value (:blur value)}]
 
       [:select.input-select
-        {:default-value (str (:style value))
+       {:default-value (str (:style value))
-         :on-change (fn [event]
+        :on-change (fn [event]
-                      (let [value (-> event dom/get-target dom/get-value d/read-string)]
+                     (let [value (-> event dom/get-target dom/get-value d/read-string)]
-                        (st/emit! (dch/update-shapes ids #(assoc-in % [:shadow index :style] value)))))}
+                       (st/emit! (dch/update-shapes ids #(assoc-in % [:shadow index :style] value)))))}
-        [:option {:value ":drop-shadow"} (tr "workspace.options.shadow-options.drop-shadow")]
+       [:option {:value ":drop-shadow"} (tr "workspace.options.shadow-options.drop-shadow")]
-        [:option {:value ":inner-shadow"} (tr "workspace.options.shadow-options.inner-shadow")]]
+       [:option {:value ":inner-shadow"} (tr "workspace.options.shadow-options.inner-shadow")]]
 
       [:div.element-set-actions
        [:div.element-set-actions-button {:on-click (toggle-visibility index)}