From 75656b442ca8a95ed7c8157acc2ba5e305663f31 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Wed, 20 Jan 2016 19:24:27 +0200 Subject: [PATCH] Make parametrizable the colorpicker dimensions. --- .../styles/partials/element-options.scss | 2 +- src/uxbox/ui/colorpicker.cljs | 121 ++++++++++-------- 2 files changed, 70 insertions(+), 53 deletions(-) diff --git a/resources/public/styles/partials/element-options.scss b/resources/public/styles/partials/element-options.scss index bc976e5889..46375410d1 100644 --- a/resources/public/styles/partials/element-options.scss +++ b/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; diff --git a/src/uxbox/ui/colorpicker.cljs b/src/uxbox/ui/colorpicker.cljs index 64dcea4092..1fc708cea0 100644 --- a/src/uxbox/ui/colorpicker.cljs +++ b/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)) -;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; -;; Color Picker -;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; +(def ^:static +params-schema+ + {: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" - :height "205" + :width cp-width + :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" - :height "205"}]]])))) - -(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))) + :width cb-width + :height cb-height}]]])))) (defn colorpicker-did-mount [own] - (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 (: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)))) + (let [params (first (:rum/props own))] + (sc/validate +params-schema+ params) + (->> (initialize own params) + (merge own)))) (defn colorpicker-will-unmout [own] @@ -118,8 +135,8 @@ (defn- colorpicker-transfer-state [old-own own] - (let [key (::key old-own)] - (assoc own ::key key))) + (let [data (select-keys old-own [::key])] + (merge own data))) (def ^:static colorpicker (mx/component