Add implementation for fill shapes.

frontend/uxbox/data/workspace.cljs

@@ -201,3 +201,11 @@
                         (when height {:height height}))]
         (update-in state [:shapes-by-id sid]
                    shapes/-resize size)))))
+
+(defn update-shape-color
+  [sid color]
+  (sc/valid? sc/color color)
+  (reify
+    rs/UpdateEvent
+    (-apply-update [_ state]
+      (assoc-in state [:shapes-by-id sid :fill] color))))

frontend/uxbox/schema.cljs

@@ -2,6 +2,7 @@
   (:refer-clojure :exclude [keyword uuid vector])
   (:require [bouncer.core :as b]
             [bouncer.validators :as v]
+            [cuerdas.core :as str]
             [uxbox.shapes :refer (shape?)]))
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
@@ -55,3 +56,13 @@
   ([schema data]
    (when-let [errors (validate schema data)]
      (throw (ex-info "Invalid data" errors)))))
+
+(defn valid?
+  [validator data]
+  (let [result (validator data)]
+    (if result
+      result
+      (let [message (:default-message-format (meta validator))
+            message (str/format message data)]
+        (throw (ex-info message {}))))))
+

frontend/uxbox/ui/shapes.cljs

@@ -33,7 +33,7 @@
   "Extract predefinet attrs from shapes."
   [shape]
   (select-keys shape [:rotation :lock :width :height
-                      :view-box :x :y :cx :cy]))
+                      :view-box :x :y :cx :cy :fill]))
 
 (defmethod shapes/-render :builtin/icon
   [{:keys [data id] :as shape} attrs]

frontend/uxbox/ui/workspace/options.cljs

@@ -9,7 +9,7 @@
             [uxbox.ui.mixins :as mx]
             [uxbox.ui.dom :as dom]
             [uxbox.ui.workspace.base :as wb]
-            [uxbox.util.data :refer (parse-int)]))
+            [uxbox.util.data :refer (parse-int parse-float)]))
 
 (def +menus-map+
   {:builtin/icon [:menu/measures :menu/fill]
@@ -44,33 +44,47 @@
 
 (defmethod -render-menu :menu/fill
   [menu own shape]
-  (html
+  (letfn [(on-color-change [event]
-   [:div.element-set {:key (str (:id menu))}
+            (let [value (dom/event->value event)
-    [:div.element-set-title (:name menu)]
+                  sid (:id shape)]
-    [:div.element-set-content
+              (-> (dw/update-shape-color sid value)
-     ;; SLIDEBAR FOR ROTATION AND OPACITY
+                  (rs/emit!))))
-     [:span "Color"]
+          (on-opacity-change [event]
-     [:div.row-flex
+            (let [value (dom/event->value event)
-      [:input#width.input-text
+                  value (parse-float value 1)]
-       {:placeholder "#"
+              (println "opacity:" value)))]
-        :type "text"
+    (html
-        :value (:color shape "")
+     [:div.element-set {:key (str (:id menu))}
-        :on-change (constantly nil)}]]
+      [:div.element-set-title (:name menu)]
+      [:div.element-set-content
+       ;; SLIDEBAR FOR ROTATION AND OPACITY
+       [:span "Color"]
+       [:div.row-flex
+        [:input#width.input-text
+         {:placeholder "#"
+          :type "text"
+          :value (:fill shape "")
+          :on-change on-color-change}]]
 
-     ;; RECENT COLORS
+       ;; RECENT COLORS
-     [:span "Recent colors"]
+       [:span "Recent colors"]
-     [:div.row-flex
+       [:div.row-flex
-      [:span.color-th]
+        [:span.color-th]
-      [:span.color-th {:style {:background "#c5cb7f"}}]
+        [:span.color-th {:style {:background "#c5cb7f"}}]
-      [:span.color-th {:style {:background "#6cb533"}}]
+        [:span.color-th {:style {:background "#6cb533"}}]
-      [:span.color-th {:style {:background "#67c6b5"}}]
+        [:span.color-th {:style {:background "#67c6b5"}}]
-      [:span.color-th {:style {:background "#a178e3"}}]
+        [:span.color-th {:style {:background "#a178e3"}}]
-      [:span.color-th.palette-th i/palette]]
+        [:span.color-th.palette-th i/palette]]
 
-     ;; SLIDEBAR FOR ROTATION AND OPACITY
+       ;; SLIDEBAR FOR ROTATION AND OPACITY
-     [:span "Opacity"]
+       [:span "Opacity"]
-     [:div.row-flex
+       [:div.row-flex
-      [:input.slidebar {:type "range"}]]]]))
+        [:input.slidebar
+         {:type "range"
+          :min "0"
+          :max "1"
+          :step "0.02"
+          :on-change on-opacity-change}]]]])))
 
 (defmethod -render-menu :menu/measures
   [menu own shape]

frontend/uxbox/util/data.cljs

@@ -49,3 +49,12 @@
      (if (or (not v) (nan? v))
        default
        v))))
+
+(defn parse-float
+  ([v]
+   (js/parseFloat v))
+  ([v default]
+   (let [v (js/parseFloat v)]
+     (if (or (not v) (nan? v))
+       default
+       v))))