mirror of
https://github.com/penpot/penpot.git
synced 2025-02-13 18:48:37 -05:00
Make parametrizable the colorpicker dimensions.
This commit is contained in:
Andrey Antukh
parent
73a8829e1c
commit
75656b442c
2 changed files with 70 additions and 53 deletions
|
|
@ -217,7 +217,7 @@
|
|||
margin-right: 15px;
|
||||
}
|
||||
.color-picker-bar {
|
||||
height: 205px;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
width: 15px;
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue