mirror of
https://github.com/penpot/penpot.git
synced 2025-01-09 08:20:45 -05:00
59 lines
1.8 KiB
Clojure
59 lines
1.8 KiB
Clojure
(ns uxbox.ui.colorpicker
|
|
(:require [sablono.core :as html :refer-macros [html]]
|
|
[rum.core :as rum]
|
|
[cats.labs.lens :as l]
|
|
[goog.events :as events]
|
|
[uxbox.ui.mixins :as mx]
|
|
[uxbox.ui.util :as util])
|
|
(:import goog.events.EventType))
|
|
|
|
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
;; Color Picker
|
|
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
|
|
(defn on-click-handler
|
|
[e own callback]
|
|
(let [canvas (util/get-ref-dom own "colorpicker")
|
|
context (.getContext canvas "2d")
|
|
brect (.getBoundingClientRect canvas)
|
|
x (- (.-pageX e) (.-left brect))
|
|
y (- (.-pageY e) (.-top brect))
|
|
image (.getImageData context x y 1 1)
|
|
r (aget (.-data image) 0)
|
|
g (aget (.-data image) 1)
|
|
b (aget (.-data image) 2)]
|
|
(callback {:hex (util/rgb->hex [r g b])
|
|
:rgb [r g b]})))
|
|
|
|
(defn colorpicker-render
|
|
[own callback]
|
|
(html
|
|
[:section.colorpicker
|
|
[:canvas
|
|
{:width "400"
|
|
:height "300"
|
|
:on-click #(on-click-handler % own callback)
|
|
:id "colorpicker"
|
|
:ref "colorpicker"}]]))
|
|
|
|
(defn colorpicker-did-mount
|
|
[own]
|
|
(let [canvas (util/get-ref-dom own "colorpicker")
|
|
context (.getContext canvas "2d")
|
|
img (js/Image.)]
|
|
(set! (.-src img) "/images/colorspecrum-400x300.png")
|
|
(let [key (events/listen img EventType.LOAD #(.drawImage context img 0 0))]
|
|
(assoc own ::key key))))
|
|
|
|
(defn colorpicker-will-unmout
|
|
[own]
|
|
(let [key (::key own)]
|
|
(events/unlistenByKey key)))
|
|
|
|
(def ^:static colorpicker
|
|
(util/component
|
|
{:render colorpicker-render
|
|
:did-mount colorpicker-did-mount
|
|
:will-unmout colorpicker-will-unmout
|
|
:name "colorpicker"
|
|
:mixins [mx/static]}))
|