enhance color management

src/renderer/color/core.cljs

@@ -0,0 +1,3 @@
+(ns renderer.color.core
+  (:require
+   [renderer.color.subs]))

src/renderer/color/db.cljs

@@ -0,0 +1,7 @@
+(ns renderer.color.db)
+
+(def default-palette
+  [["white" "maroon" "red" "purple" "magenta" "green" "lime"
+    "olive" "yellow" "navy" "blue" "teal" "cyan" "transparent"]
+   ["black" "#111111" "#222222" "#333333" "#444444" "#555555" "#666666"
+    "#777777" "#888888" "#999999" "#aaaaaa" "#cccccc" "#dddddd" "#eeeeee"]])

src/renderer/color/subs.cljs

@@ -0,0 +1,34 @@
+(ns renderer.color.subs
+  (:require
+   [clojure.set :as set]
+   [re-frame.core :as rf]
+   [renderer.color.db :as color.db]))
+
+(rf/reg-sub
+ :color/fills
+ :<- [:element/visible]
+ (fn [visible-elements _]
+   (reduce (fn [colors element]
+             (let [color (-> element :attrs :fill)]
+               (conj colors color)))
+           #{}
+           visible-elements)))
+
+(rf/reg-sub
+ :color/selected-fills
+ :<- [:element/selected]
+ (fn [selected-elements _]
+   (reduce (fn [colors element]
+             (let [color (-> element :attrs :fill)]
+               (conj colors color)))
+           #{}
+           selected-elements)))
+
+
+(rf/reg-sub
+ :color/custom-fills
+ :<- [:color/fills]
+ (fn [fills _]
+   (let [palette-colors (set (flatten color.db/default-palette))
+         colors (set/difference fills palette-colors)]
+     (take 5 colors))))

src/renderer/color/views.cljs

@@ -4,6 +4,7 @@
    ["@re-path/react-color" :refer [PhotoshopPicker]]
    [i18n :refer [t]]
    [re-frame.core :as rf]
+   [renderer.color.db :as color.db]
    [renderer.components :as comp]))
 
 (defn drip [color]
@@ -19,14 +20,8 @@
 (defn swatch [colors]
   [:div.flex (map drip colors)])
 
-(def color-palette
-  [["white" "maroon" "red" "purple" "magenta" "green" "lime"
-    "olive" "yellow" "navy" "blue" "teal" "cyan" "transparent"]
-   ["black" "#111111" "#222222" "#333333" "#444444" "#555555" "#666666"
-    "#777777" "#888888" "#999999" "#aaaaaa" "#cccccc" "#dddddd" "#eeeeee"]])
-
 (defn palette []
-  (into [:div.flex.flex-col.palette] (map swatch color-palette)))
+  (into [:div.flex.flex-col.palette] (map swatch color.db/default-palette)))
 
 (defn get-hex
   [color-object]

src/renderer/document/db.cljs

@@ -19,8 +19,8 @@
   {:hovered-keys #{}
    :ignored-keys #{}
    :active-page :default-page
-   :fill "#ffffff"
-   :stroke "#000000"
+   :fill "white"
+   :stroke "black"
    :zoom 1
    :rotate 0
    :filter "No a11y filter"
@@ -39,5 +39,5 @@
                              :parent :canvas
                              :attrs {:width 800
                                      :height 600
-                                     :fill "#ffffff"}
+                                     :fill "white"}
                              :children []}}})

src/renderer/element/subs.cljs

@@ -143,16 +143,6 @@
  (fn [[elements hovered-keys selected-keys] _]
    (vals (select-keys elements (set/union hovered-keys selected-keys)))))
 
-(rf/reg-sub
- :element/colors
- :<- [:element/visible]
- (fn [visible-elements _]
-   (reduce (fn [colors element]
-             (let [color (get-in element [:attrs :fill])]
-               (conj colors color)))
-           #{}
-           visible-elements)))
-
 (rf/reg-sub
  :snapping-points
  :<- [:document/elements]