diff --git a/frontend/src/app/main/data/colors.cljs b/frontend/src/app/main/data/colors.cljs index 745345c12..4fe8a6f55 100644 --- a/frontend/src/app/main/data/colors.cljs +++ b/frontend/src/app/main/data/colors.cljs @@ -134,11 +134,21 @@ text-ids (filter is-text? ids) shape-ids (filter (comp not is-text?) ids) - attrs {:fill-color (:color color) - :fill-color-ref-id (:id color) - :fill-color-ref-file (:file-id color) - :fill-color-gradient (:gradient color) - :fill-opacity (:opacity color)} + attrs (cond-> {} + (contains? color :color) + (assoc :fill-color (:color color)) + + (contains? color :id) + (assoc :fill-color-ref-id (:id color)) + + (contains? color :file-id) + (assoc :fill-color-ref-file (:file-id color)) + + (contains? color :gradient) + (assoc :fill-color-gradient (:gradient color)) + + (contains? color :opacity) + (assoc :fill-opacity (:opacity color))) update-fn (fn [shape] (merge shape attrs)) editors (get-in state [:workspace-local :editors]) @@ -157,19 +167,30 @@ (let [pid (:current-page-id state) objects (get-in state [:workspace-data :pages-index pid :objects]) not-frame (fn [shape-id] (not= (get-in objects [shape-id :type]) :frame)) - update-fn (fn [s] - (cond-> s - true - (assoc :stroke-color (:color color) - :stroke-opacity (:opacity color) - :stroke-color-gradient (:gradient color) - :stroke-color-ref-id (:id color) - :stroke-color-ref-file (:file-id color)) - (= (:stroke-style s) :none) - (assoc :stroke-style :solid - :stroke-width 1 - :stroke-opacity 1)))] + color-attrs (cond-> {} + (contains? color :color) + (assoc :stroke-color (:color color)) + + (contains? color :id) + (assoc :stroke-color-ref-id (:id color)) + + (contains? color :file-id) + (assoc :stroke-color-ref-file (:file-id color)) + + (contains? color :gradient) + (assoc :stroke-color-gradient (:gradient color)) + + (contains? color :opacity) + (assoc :stroke-opacity (:opacity color))) + + update-fn (fn [shape] + (-> shape + (merge color-attrs) + (cond-> (= (:stroke-style s) :none) + (assoc :stroke-style :solid + :stroke-width 1 + :stroke-opacity 1))))] (rx/of (dwc/update-shapes ids update-fn)))))) (defn picker-for-selected-shape diff --git a/frontend/src/app/main/refs.cljs b/frontend/src/app/main/refs.cljs index cbfabd043..74d35c0d5 100644 --- a/frontend/src/app/main/refs.cljs +++ b/frontend/src/app/main/refs.cljs @@ -12,6 +12,7 @@ (:require [beicon.core :as rx] [okulary.core :as l] + [app.common.data :as d] [app.common.pages :as cp] [app.common.uuid :as uuid] [app.main.constants :as c] @@ -109,7 +110,8 @@ (def workspace-file-colors (l/derived (fn [state] (when-let [file (:workspace-file state)] - (get-in file [:data :colors]))) + (->> (get-in file [:data :colors]) + (d/mapm #(assoc %2 :file-id (:id file)))))) st/state)) (def workspace-recent-colors diff --git a/frontend/src/app/main/ui/workspace/colorpalette.cljs b/frontend/src/app/main/ui/workspace/colorpalette.cljs index 641fd3467..eb2653003 100644 --- a/frontend/src/app/main/ui/workspace/colorpalette.cljs +++ b/frontend/src/app/main/ui/workspace/colorpalette.cljs @@ -19,7 +19,7 @@ [app.main.ui.context :as ctx] [app.main.ui.icons :as i] [app.main.ui.keyboard :as kbd] - [app.util.color :refer [hex->rgb]] + [app.util.color :as uc] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [t]] [app.util.object :as obj] @@ -55,8 +55,8 @@ (fn [event] (let [ids (get-in @st/state [:workspace-local :selected])] (if (kbd/shift? event) - (st/emit! (mdc/change-stroke ids color)) - (st/emit! (mdc/change-fill ids color)))))] + (st/emit! (mdc/change-stroke ids (merge uc/empty-color color))) + (st/emit! (mdc/change-fill ids (merge uc/empty-color color))))))] [:div.color-cell {:class (str "cell-"(name size)) :on-click select-color} diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/fill.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/fill.cljs index 4c07e1cc2..f9a1c73a5 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/fill.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/fill.cljs @@ -9,17 +9,18 @@ (ns app.main.ui.workspace.sidebar.options.fill (:require - [rumext.alpha :as mf] [app.common.pages :as cp] + [app.main.data.colors :as dc] [app.main.data.workspace.common :as dwc] [app.main.data.workspace.texts :as dwt] - [app.main.data.colors :as dc] [app.main.refs :as refs] [app.main.store :as st] [app.main.ui.icons :as i] [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]] + [app.util.color :as uc] [app.util.i18n :as i18n :refer [tr t]] - [app.util.object :as obj])) + [app.util.object :as obj] + [rumext.alpha :as mf])) (def fill-attrs [:fill-color @@ -57,19 +58,24 @@ (mf/use-callback (mf/deps ids) (fn [event] - (st/emit! (dc/change-fill ids nil)))) + (st/emit! (dc/change-fill ids (into {} uc/empty-color))))) on-change (mf/use-callback (mf/deps ids) (fn [color] - (st/emit! (dc/change-fill ids color)))) + (let [remove-multiple (fn [[key value]] (not= value :multiple)) + color (into {} (filter remove-multiple) color)] + (st/emit! (dc/change-fill ids color))))) on-detach (mf/use-callback (mf/deps ids) (fn [] - (st/emit! (dc/change-fill ids (dissoc color :id :file-id))))) + (let [remove-multiple (fn [[key value]] (not= value :multiple)) + color (-> (into {} (filter remove-multiple) color) + (assoc :id nil :file-id nil))] + (st/emit! (dc/change-fill ids color))))) on-open-picker (mf/use-callback diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs index 473ae5377..2557a7d14 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs @@ -82,10 +82,13 @@ (dissoc :gradient))))) change-opacity (fn [new-opacity] - (when on-change (on-change (assoc color :opacity new-opacity)))) + (when on-change (on-change (assoc color + :opacity new-opacity + :id nil + :file-id nil)))) handle-pick-color (fn [color] - (when on-change (on-change color))) + (when on-change (on-change (merge uc/empty-color color)))) handle-open (fn [] (when on-open (on-open))) @@ -133,7 +136,7 @@ (cond ;; Rendering a color with ID - (:id color) + (and (:id color) (not (uc/multiple? color))) [:* [:div.color-info [:div.color-name (str (get-color-name color))]] @@ -146,7 +149,8 @@ ;; Rendering a gradient (and (not (uc/multiple? color)) - (:gradient color) (get-in color [:gradient :type])) + (:gradient color) + (get-in color [:gradient :type])) [:div.color-info [:div.color-name (cb/gradient-type->string (get-in color [:gradient :type]))]] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shadow.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shadow.cljs index ededae846..c6e4a4d38 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shadow.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shadow.cljs @@ -78,11 +78,12 @@ update-color (fn [index] (fn [color opacity] - (st/emit! (dwc/update-shapes - ids - #(-> % - (assoc-in [:shadow index :color] color) - (assoc-in [:shadow index :opacity] opacity)))))) + (let [color (d/without-keys color [:id :file-id :gradient])] + (st/emit! (dwc/update-shapes + ids + #(-> % + (assoc-in [:shadow index :color] color) + (assoc-in [:shadow index :opacity] opacity))))))) detach-color (fn [index] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/stroke.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/stroke.cljs index eb5441a8e..8b1c9124f 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/stroke.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/stroke.cljs @@ -66,7 +66,9 @@ (mf/use-callback (mf/deps ids) (fn [color] - (st/emit! (dc/change-stroke ids color)))) + (let [remove-multiple (fn [[key value]] (not= value :multiple)) + color (into {} (filter remove-multiple) color)] + (st/emit! (dc/change-stroke ids color))))) handle-detach (mf/use-callback diff --git a/frontend/src/app/util/color.cljs b/frontend/src/app/util/color.cljs index c5d4237a2..4c3ad3f63 100644 --- a/frontend/src/app/util/color.cljs +++ b/frontend/src/app/util/color.cljs @@ -109,12 +109,16 @@ :else "transparent"))) -(defn multiple? [{:keys [value color gradient]}] +(defn multiple? [{:keys [id file-id value color gradient]}] (or (= value :multiple) (= color :multiple) (= gradient :multiple) - (and gradient color))) + (= id :multiple) + (= file-id :multiple))) (defn parse-color [^string color-str] (let [result (gcolor/parse color-str)] (str (.-hex ^js result)))) + +(def empty-color + (into {} (map #(vector % nil)) [:color :id :file-id :gradient :opacity]))