From 18855ef2ef1ad9dc612ceee602ef232701851c14 Mon Sep 17 00:00:00 2001 From: Alejandro Alonso Date: Wed, 6 Apr 2022 08:04:27 +0200 Subject: [PATCH] :bug: Selected colors doesn't work for shadows --- common/src/app/common/spec/shadow.cljc | 17 +++++++++++++-- .../src/app/main/data/workspace/colors.cljs | 10 +++++++++ .../options/menus/color_selection.cljs | 21 ++++++++++++++++--- .../sidebar/options/menus/shadow.cljs | 21 +++++++++---------- 4 files changed, 53 insertions(+), 16 deletions(-) diff --git a/common/src/app/common/spec/shadow.cljc b/common/src/app/common/spec/shadow.cljc index b7c61a7ee..4c28dc761 100644 --- a/common/src/app/common/spec/shadow.cljc +++ b/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 diff --git a/frontend/src/app/main/data/workspace/colors.cljs b/frontend/src/app/main/data/workspace/colors.cljs index c93412fdb..492348b6a 100644 --- a/frontend/src/app/main/data/workspace/colors.cljs +++ b/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 diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs index a1418a655..6008959fc 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs +++ b/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))) 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 6ad85d7fe..8691179cb 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 @@ -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 - ids - #(assoc-in % [:shadow index :color] color)))))) + (st/emit! (dch/update-shapes + ids + #(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)) - :on-change (fn [event] - (let [value (-> event dom/get-target dom/get-value d/read-string)] - (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 ":inner-shadow"} (tr "workspace.options.shadow-options.inner-shadow")]] + {:default-value (str (:style value)) + :on-change (fn [event] + (let [value (-> event dom/get-target dom/get-value d/read-string)] + (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 ":inner-shadow"} (tr "workspace.options.shadow-options.inner-shadow")]] [:div.element-set-actions [:div.element-set-actions-button {:on-click (toggle-visibility index)}