Make parametrizable the colorpicker dimensions.

resources/public/styles/partials/element-options.scss

@@ -217,7 +217,7 @@
     margin-right: 15px;
   }
   .color-picker-bar {
-    height: 205px;
+    height: 100%;
     position: relative;
     width: 15px;
 

src/uxbox/ui/colorpicker.cljs

@@ -3,14 +3,64 @@
             [rum.core :as rum]
             [cats.labs.lens :as l]
             [goog.events :as events]
+            [uxbox.schema :as sc]
             [uxbox.util.color :as color]
             [uxbox.util.math :as mth]
             [uxbox.ui.mixins :as mx])
   (:import goog.events.EventType))
 
-;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+(def ^:static +params-schema+
-;; Color Picker
+  {:picker {:width [sc/required sc/number]
-;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+            :height [sc/required sc/number]}
+   :bar {:width [sc/required sc/number]
+         :height [sc/required sc/number]}
+   :callback [sc/required sc/function]})
+
+(defn- draw-color-gradient
+  [context params color]
+  (let [width (get-in params [:picker :width])
+        halfwidth (/ width 2)
+        gradient1 (.createLinearGradient context 0 halfwidth width halfwidth)
+        gradient2 (.createLinearGradient context halfwidth width halfwidth 0)]
+
+    ;; Draw plain color
+    (set! (.-fillStyle context) color)
+    (.fillRect context 0 0 width width)
+
+    ;;    Transparency gradient
+    (.addColorStop gradient2 0 "rgba(255,255,255,1)")
+    (.addColorStop gradient2 1 "rgba(0,0,0,0)")
+
+    (set! (.-fillStyle context) gradient2)
+    (.fillRect context 0 0 width width)
+
+    ;; Color gradient
+    (.addColorStop gradient1 0 "rgba(0,0,0,1)")
+    (.addColorStop gradient1 0.8 "rgba(0,0,0,0)")
+
+    (set! (.-fillStyle context) gradient1)
+    (.fillRect context 0 0 width width)))
+
+(defn- initialize
+  [own params]
+  (let [canvas1 (mx/get-ref-dom own "colorpicker")
+        context1 (.getContext canvas1 "2d")
+        canvas2 (mx/get-ref-dom own "colorbar")
+        context2 (.getContext canvas2 "2d")
+        img (js/Image.)
+        local (:rum/local own)]
+
+    (add-watch local ::key
+               (fn [_ _ o v]
+                 (println "add-watch" o v)
+                 (when (not= (:color o) (:color v))
+                   (draw-color-gradient context1 params (:color v)))))
+
+    (draw-color-gradient context1 params "#FF0000")
+
+    (set! (.-src img) "/images/color-bar.png")
+    (let [key (events/listen img EventType.LOAD #(.drawImage context2 img 0 0))]
+      {::key key})))
 
 (defn- get-mouse-pos
   [own ref event]
@@ -32,8 +82,12 @@
     (color/rgb->hex [r g b])))
 
 (defn- colorpicker-render
-  [own callback]
+  [own {:keys [callback] :as params}]
   (let [local (:rum/local own)
+        cp-width (get-in params [:picker :width])
+        cp-height (get-in params [:picker :height])
+        cb-width (get-in params [:bar :width])
+        cb-height (get-in params [:bar :height])
         bar-pos (:pos @local 0)]
     (letfn [(on-bar-mouse-down [event])
             (on-bar-mouse-up [event])
@@ -45,7 +99,7 @@
             (on-bar-click [event]
               (let [[x y :as pos] (get-mouse-pos own "colorbar" event)
                     color (get-color own "colorbar" pos)
-                    pos (/ (* 100 y) 205)]
+                    pos (/ (* 100 y) cb-height)]
                 (swap! local assoc :pos pos :color color)))]
       (html
        [:div.element-color-picker
@@ -53,8 +107,8 @@
          [:canvas {:ref "colorpicker"
                    :on-click on-picker-click
                    :style {:border "1px solid #AAA"}
-                   :width "205"
+                   :width cp-width
-                   :height "205"
+                   :height cp-height
                    :id "colorpicker"}]]
         [:div.color-picker-bar
          [:div.color-bar-select {:style {:top (str bar-pos "%")}
@@ -62,52 +116,15 @@
                                  :on-mouse-up on-bar-mouse-up}]
          [:canvas {:ref "colorbar"
                    :on-click on-bar-click
-                   :width "15"
+                   :width cb-width
-                   :height "205"}]]]))))
+                   :height cb-height}]]]))))
-
-(defn- draw-color-gradient
-  [context color]
-  (let [gradient1 (.createLinearGradient context 0, 102.5, 205, 102.5)
-        gradient2 (.createLinearGradient context 102.5, 205, 105, 0)]
-
-    ;; Draw plain color
-    (set! (.-fillStyle context) color)
-    (.fillRect context 0 0 205 205)
-
-    ;;    Transparency gradient
-    (.addColorStop gradient2 0 "rgba(255,255,255,1)")
-    (.addColorStop gradient2 1 "rgba(0,0,0,0)")
-
-    (set! (.-fillStyle context) gradient2)
-    (.fillRect context 0 0 205 205)
-
-    ;; Color gradient
-    (.addColorStop gradient1 0 "rgba(0,0,0,1)")
-    (.addColorStop gradient1 0.8 "rgba(0,0,0,0)")
-
-    (set! (.-fillStyle context) gradient1)
-    (.fillRect context 0 0 205 205)))
 
 (defn colorpicker-did-mount
   [own]
-  (let [canvas1 (mx/get-ref-dom own "colorpicker")
+  (let [params (first (:rum/props own))]
-        context1 (.getContext canvas1 "2d")
+    (sc/validate +params-schema+ params)
-        canvas2 (mx/get-ref-dom own "colorbar")
+    (->> (initialize own params)
-        context2 (.getContext canvas2 "2d")
+         (merge own))))
-        img (js/Image.)
-        local (:rum/local own)]
-
-    (add-watch local ::key
-               (fn [_ _ o v]
-                 (println "add-watch" o v)
-                 (when (not= (:color o) (:color v))
-                   (draw-color-gradient context1 (:color v)))))
-
-    (draw-color-gradient context1 "#FF0000")
-
-    (set! (.-src img) "/images/color-bar.png")
-    (let [key (events/listen img EventType.LOAD #(.drawImage context2 img 0 0))]
-      (assoc own ::key key))))
 
 (defn colorpicker-will-unmout
   [own]
@@ -118,8 +135,8 @@
 
 (defn- colorpicker-transfer-state
   [old-own own]
-  (let [key (::key old-own)]
+  (let [data (select-keys old-own [::key])]
-    (assoc own ::key key)))
+    (merge own data)))
 
 (def ^:static colorpicker
   (mx/component