3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-08 15:51:37 +02:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #2152 from penpot/niwinz-colorpicker-state-management-refactor

Browse source 
♻️ Refactor state management on colorpicker and gradients
This commit is contained in:
Alejandro 2022-08-17 11:12:22 +02:00 • committed by GitHub
commit 5c5ec8ef56
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
19 changed files with 752 additions and 657 deletions
Download patch file Download diff file Expand all files Collapse all files

1
CHANGES.md
View file

@ -49,6 +49,7 @@
- Fix unexpected removal of guides on copy&paste frames [Taiga #3887](https://tree.taiga.io/project/penpot/issue/3887) by @andrewzhurov - Fix unexpected removal of guides on copy&paste frames [Taiga #3887](https://tree.taiga.io/project/penpot/issue/3887) by @andrewzhurov
- Fix props preserving on copy&paste texts [Taiga #3629](https://tree.taiga.io/project/penpot/issue/3629) by @andrewzhurov - Fix props preserving on copy&paste texts [Taiga #3629](https://tree.taiga.io/project/penpot/issue/3629) by @andrewzhurov
- Fix unexpected layers ungrouping on moving it [Taiga #3932](https://tree.taiga.io/project/penpot/issue/3932) by @andrewzhurov - Fix unexpected layers ungrouping on moving it [Taiga #3932](https://tree.taiga.io/project/penpot/issue/3932) by @andrewzhurov
- Fix unexpected exception and behavior on colorpicker with gradients [Taiga #3448](https://tree.taiga.io/project/penpot/issue/3448)

1
frontend/resources/styles/main/partials/color-palette.scss
View file

@ -82,6 +82,7 @@
.color-palette-actions-button { .color-palette-actions-button {
cursor: pointer; cursor: pointer;
display: flex;
& svg { & svg {
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;

52
frontend/src/app/main/broadcast.cljs Normal file
View file

@ -0,0 +1,52 @@
;; This Source Code Form is subject to the terms of the Mozilla Public
;; License, v. 2.0. If a copy of the MPL was not distributed with this
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
;;
;; Copyright (c) UXBOX Labs SL
(ns app.main.broadcast
"BroadcastChannel API."
(:require
[app.common.transit :as t]
[beicon.core :as rx]
[potok.core :as ptk]))
(defrecord BroadcastMessage [id type data]
cljs.core/IDeref
(-deref [_] data))
(def ^:const default-topic "penpot")
;; The main broadcast channel instance, used for emit data
(defonce default-channel
(js/BroadcastChannel. default-topic))
(defonce stream
(->> (rx/create (fn [subs]
(let [chan (js/BroadcastChannel. default-topic)]
(unchecked-set chan "onmessage" #(rx/push! subs (unchecked-get % "data")))
(fn [] (.close ^js chan)))))
(rx/map t/decode-str)
(rx/map map->BroadcastMessage)
(rx/share)))
(defn emit!
([type data]
(.postMessage ^js default-channel (t/encode-str {:id nil :type type :data data}))
nil)
([id type data]
(.postMessage ^js default-channel (t/encode-str {:id id :type type :data data}))
nil))
(defn type?
([type]
(fn [obj] (= (:type obj) type)))
([obj type]
(= (:type obj) type)))
(defn event
[type data]
(ptk/reify ::event
ptk/EffectEvent
(effect [_ _ _]
(emit! type data))))

253
frontend/src/app/main/data/workspace/colors.cljs
View file

@ -6,55 +6,32 @@
(ns app.main.data.workspace.colors (ns app.main.data.workspace.colors
(:require (:require
[app.common.colors :as clr] [app.common.colors :as colors]
[app.common.data :as d] [app.common.data :as d]
[app.common.pages.helpers :as cph] [app.common.pages.helpers :as cph]
[app.main.broadcast :as mbc]
[app.main.data.modal :as md] [app.main.data.modal :as md]
[app.main.data.workspace.changes :as dch] [app.main.data.workspace.changes :as dch]
[app.main.data.workspace.layout :as layout] [app.main.data.workspace.layout :as layout]
[app.main.data.workspace.libraries :as dwl]
[app.main.data.workspace.state-helpers :as wsh] [app.main.data.workspace.state-helpers :as wsh]
[app.main.data.workspace.texts :as dwt] [app.main.data.workspace.texts :as dwt]
[app.util.color :as uc] [app.util.color :as uc]
[beicon.core :as rx] [beicon.core :as rx]
[potok.core :as ptk])) [potok.core :as ptk]))
(defn change-palette-selected ;; A set of keys that are used for shared state identifiers
"Change the library used by the general palette tool" (def ^:const colorpicker-selected-broadcast-key ::colorpicker-selected)
[selected] (def ^:const colorpalette-selected-broadcast-key ::colorpalette-selected)
(ptk/reify ::change-palette-selected
ptk/UpdateEvent
(update [_ state]
(assoc-in state [:workspace-global :selected-palette] selected))
ptk/EffectEvent
(effect [_ state _]
(let [wglobal (:workspace-global state)]
(layout/persist-layout-state! wglobal)))))
(defn change-palette-selected-colorpicker
"Change the library used by the color picker"
[selected]
(ptk/reify ::change-palette-selected-colorpicker
ptk/UpdateEvent
(update [_ state]
(assoc-in state [:workspace-global :selected-palette-colorpicker] selected))
ptk/EffectEvent
(effect [_ state _]
(let [wglobal (:workspace-global state)]
(layout/persist-layout-state! wglobal)))))
(defn show-palette (defn show-palette
"Show the palette tool and change the library it uses" "Show the palette tool and change the library it uses"
[selected] [selected]
(ptk/reify ::show-palette (ptk/reify ::show-palette
ptk/UpdateEvent
(update [_ state]
(assoc-in state [:workspace-global :selected-palette] selected))
ptk/WatchEvent ptk/WatchEvent
(watch [_ _ _] (watch [_ _ _]
(rx/of (layout/toggle-layout-flag :colorpalette :force? true))) (rx/of (layout/toggle-layout-flag :colorpalette :force? true)
(mbc/event colorpalette-selected-broadcast-key selected)))
ptk/EffectEvent ptk/EffectEvent
(effect [_ state _] (effect [_ state _]
@ -342,45 +319,11 @@
(-> state (-> state
(assoc-in [:workspace-global :picking-color?] true) (assoc-in [:workspace-global :picking-color?] true)
(assoc ::md/modal {:id (random-uuid) (assoc ::md/modal {:id (random-uuid)
:data {:color clr/black :opacity 1} :data {:color colors/black :opacity 1}
:type :colorpicker :type :colorpicker
:props {:on-change handle-change-color} :props {:on-change handle-change-color}
:allow-click-outside true}))))))) :allow-click-outside true})))))))
(defn start-gradient
[gradient]
(ptk/reify ::start-gradient
ptk/UpdateEvent
(update [_ state]
(let [id (-> state wsh/lookup-selected first)]
(-> state
(assoc-in [:workspace-global :current-gradient] gradient)
(assoc-in [:workspace-global :current-gradient :shape-id] id))))))
(defn stop-gradient
[]
(ptk/reify ::stop-gradient
ptk/UpdateEvent
(update [_ state]
(-> state
(update :workspace-global dissoc :current-gradient)))))
(defn update-gradient
[changes]
(ptk/reify ::update-gradient
ptk/UpdateEvent
(update [_ state]
(-> state
(update-in [:workspace-global :current-gradient] merge changes)))))
(defn select-gradient-stop
[spot]
(ptk/reify ::select-gradient-stop
ptk/UpdateEvent
(update [_ state]
(-> state
(assoc-in [:workspace-global :editing-stop] spot)))))
(defn color-att->text (defn color-att->text
[color] [color]
{:fill-color (:color color) {:fill-color (:color color)
@ -409,7 +352,9 @@
:fill (change-fill [(:shape-id shape)] new-color (:index shape)) :fill (change-fill [(:shape-id shape)] new-color (:index shape))
:stroke (change-stroke [(:shape-id shape)] new-color (:index shape)) :stroke (change-stroke [(:shape-id shape)] new-color (:index shape))
:shadow (change-shadow [(:shape-id shape)] new-color (:index shape)) :shadow (change-shadow [(:shape-id shape)] new-color (:index shape))
:content (dwt/update-text-with-function (:shape-id shape) (partial change-text-color old-color new-color (:index shape)))))))))) :content (dwt/update-text-with-function
(:shape-id shape)
(partial change-text-color old-color new-color (:index shape))))))))))
(defn apply-color-from-palette (defn apply-color-from-palette
[color is-alt?] [color is-alt?]
@ -431,3 +376,177 @@
(if is-alt? (if is-alt?
(rx/of (change-stroke ids (merge uc/empty-color color) 0)) (rx/of (change-stroke ids (merge uc/empty-color color) 0))
(rx/of (change-fill ids (merge uc/empty-color color) 0))))))) (rx/of (change-fill ids (merge uc/empty-color color) 0)))))))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; COLORPICKER STATE MANAGEMENT
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(defn split-color-components
[{:keys [color opacity] :as data}]
(let [value (if (uc/hex? color) color colors/black)
[r g b] (uc/hex->rgb value)
[h s v] (uc/hex->hsv value)]
(merge data
{:hex (or value "000000")
:alpha (or opacity 1)
:r r :g g :b b
:h h :s s :v v})))
(defn materialize-color-components
[{:keys [hex alpha] :as data}]
(-> data
(assoc :color hex)
(assoc :opacity alpha)))
(defn clear-color-components
[data]
(dissoc data :hex :alpha :r :g :b :h :s :v))
(defn- create-gradient
[type]
{:start-x 0.5
:start-y (if (= type :linear-gradient) 0.0 0.5)
:end-x 0.5
:end-y 1
:width 1.0})
(defn get-color-from-colorpicker-state
[{:keys [type current-color stops gradient] :as state}]
(if (= type :color)
(clear-color-components current-color)
{:gradient (-> gradient
(assoc :type (case type
:linear-gradient :linear
:radial-gradient :radial))
(assoc :stops (mapv clear-color-components stops))
(dissoc :shape-id))}))
(defn- colorpicker-onchange-runner
"Effect event that runs the on-change callback with the latest
colorpicker state converted to color object."
[on-change]
(ptk/reify ::colorpicker-onchange-runner
ptk/WatchEvent
(watch [_ state _]
(when-let [color (some-> state :colorpicker get-color-from-colorpicker-state)]
(on-change color)
(rx/of (dwl/add-recent-color color))))))
(defn initialize-colorpicker
[on-change]
(ptk/reify ::initialize-colorpicker
ptk/WatchEvent
(watch [_ _ stream]
(let [stoper (rx/merge
(rx/filter (ptk/type? ::finalize-colorpicker) stream)
(rx/filter (ptk/type? ::initialize-colorpicker) stream))]
(->> (rx/merge
(->> stream
(rx/filter (ptk/type? ::update-colorpicker-gradient))
(rx/debounce 200))
(rx/filter (ptk/type? ::update-colorpicker-color) stream)
(rx/filter (ptk/type? ::activate-colorpicker-gradient) stream))
(rx/map (constantly (colorpicker-onchange-runner on-change)))
(rx/take-until stoper))))))
(defn finalize-colorpicker
[]
(ptk/reify ::finalize-colorpicker
ptk/UpdateEvent
(update [_ state]
(dissoc state :colorpicker))))
(defn update-colorpicker
[{:keys [gradient] :as data}]
(ptk/reify ::update-colorpicker
ptk/UpdateEvent
(update [_ state]
(let [shape-id (-> state wsh/lookup-selected first)]
(update state :colorpicker
(fn [state]
(if (some? gradient)
(let [stop (or (:editing-stop state) 0)
stops (mapv split-color-components (:stops gradient))
type (case (:type gradient)
:linear :linear-gradient
:radial :radial-gradient)]
(-> state
(assoc :type type)
(assoc :current-color (nth stops stop))
(assoc :stops stops)
(assoc :gradient (-> gradient
(dissoc :stops)
(assoc :shape-id shape-id)))
(assoc :editing-stop stop)))
(-> state
(assoc :type :color)
(assoc :current-color (split-color-components (dissoc data :gradient)))
(dissoc :editing-stop)
(dissoc :gradient)
(dissoc :stops)))))))))
(defn update-colorpicker-color
[changes]
(ptk/reify ::update-colorpicker-color
ptk/UpdateEvent
(update [_ state]
(update state :colorpicker
(fn [state]
(let [state (-> state
(update :current-color merge changes)
(update :current-color materialize-color-components))]
(if-let [stop (:editing-stop state)]
(update-in state [:stops stop] (fn [data] (->> changes
(merge data)
(materialize-color-components))))
(-> state
(assoc :type :color)
(dissoc :gradient :stops :editing-stop)))))))))
(defn update-colorpicker-gradient
[changes]
(ptk/reify ::update-colorpicker-gradient
ptk/UpdateEvent
(update [_ state]
(update-in state [:colorpicker :gradient] merge changes))))
(defn select-colorpicker-gradient-stop
[stop]
(ptk/reify ::select-colorpicket-gradient-stop
ptk/UpdateEvent
(update [_ state]
(update state :colorpicker
(fn [state]
(if-let [color (get-in state [:stops stop])]
(assoc state
:current-color color
:editing-stop stop)
state))))))
(defn activate-colorpicker-gradient
[type]
(ptk/reify ::activate-colorpicker-gradient
ptk/UpdateEvent
(update [_ state]
(update state :colorpicker
(fn [state]
(if (= type (:type state))
(do
(-> state
(assoc :type :color)
(dissoc :editing-stop :stops :gradient)))
(let [gradient (create-gradient type)
color (:current-color state)]
(-> state
(assoc :type type)
(assoc :gradient gradient)
(cond-> (not (:stops state))
(assoc :editing-stop 0
:stops [(assoc color :offset 0)
(-> color
(assoc :alpha 0)
(assoc :offset 1)
(materialize-color-components))]))))))))))

2
frontend/src/app/main/data/workspace/libraries.cljs
View file

@ -113,7 +113,7 @@
(defn add-recent-color (defn add-recent-color
[color] [color]
(us/assert ::ctc/recent-color color) (us/assert! ::ctc/recent-color color)
(ptk/reify ::add-recent-color (ptk/reify ::add-recent-color
ptk/WatchEvent ptk/WatchEvent
(watch [it _ _] (watch [it _ _]

4
frontend/src/app/main/refs.cljs
View file

@ -410,3 +410,7 @@
(defn workspace-text-modifier-by-id [id] (defn workspace-text-modifier-by-id [id]
(l/derived #(get % id) workspace-text-modifier =)) (l/derived #(get % id) workspace-text-modifier =))
(def colorpicker
(l/derived :colorpicker st/state))

16
frontend/src/app/main/ui/components/color_bullet.cljs
View file

@ -17,9 +17,17 @@
:radial (tr "workspace.gradients.radial") :radial (tr "workspace.gradients.radial")
nil)) nil))
(mf/defc color-bullet [{:keys [color on-click]}] (mf/defc color-bullet
{::mf/wrap [mf/memo]}
[{:keys [color on-click]}]
(let [on-click (mf/use-fn
(mf/deps color on-click)
(fn [event]
(when (fn? on-click)
(^function on-click color event))))]
(if (uc/multiple? color) (if (uc/multiple? color)
[:div.color-bullet.multiple {:on-click #(when on-click (on-click %))}] [:div.color-bullet.multiple {:on-click on-click}]
;; No multiple selection ;; No multiple selection
(let [color (if (string? color) {:color color :opacity 1} color)] (let [color (if (string? color) {:color color :opacity 1} color)]
@ -27,13 +35,13 @@
{:class (dom/classnames :is-library-color (some? (:id color)) {:class (dom/classnames :is-library-color (some? (:id color))
:is-not-library-color (nil? (:id color)) :is-not-library-color (nil? (:id color))
:is-gradient (some? (:gradient color))) :is-gradient (some? (:gradient color)))
:on-click #(when on-click (on-click %)) :on-click on-click
:alt (or (:name color) (:color color) (gradient-type->string (:type (:gradient color))))} :alt (or (:name color) (:color color) (gradient-type->string (:type (:gradient color))))}
(if (:gradient color) (if (:gradient color)
[:div.color-bullet-wrapper {:style {:background (uc/color->background color)}}] [:div.color-bullet-wrapper {:style {:background (uc/color->background color)}}]
[:div.color-bullet-wrapper [:div.color-bullet-wrapper
[:div.color-bullet-left {:style {:background (uc/color->background (assoc color :opacity 1))}}] [:div.color-bullet-left {:style {:background (uc/color->background (assoc color :opacity 1))}}]
[:div.color-bullet-right {:style {:background (uc/color->background color)}}]])]))) [:div.color-bullet-right {:style {:background (uc/color->background color)}}]])]))))
(mf/defc color-name [{:keys [color size on-click on-double-click]}] (mf/defc color-name [{:keys [color size on-click on-double-click]}]
(let [color (if (string? color) {:color color :opacity 1} color) (let [color (if (string? color) {:color color :opacity 1} color)

68
frontend/src/app/main/ui/hooks.cljs
View file

@ -7,16 +7,26 @@
(ns app.main.ui.hooks (ns app.main.ui.hooks
"A collection of general purpose react hooks." "A collection of general purpose react hooks."
(:require (:require
[app.common.data.macros :as dm]
[app.common.pages :as cp] [app.common.pages :as cp]
[app.common.uuid :as uuid]
[app.main.broadcast :as mbc]
[app.main.data.shortcuts :as dsc] [app.main.data.shortcuts :as dsc]
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.store :as st] [app.main.store :as st]
[app.util.dom :as dom] [app.util.dom :as dom]
[app.util.dom.dnd :as dnd] [app.util.dom.dnd :as dnd]
[app.util.storage :refer [storage]]
[app.util.timers :as ts] [app.util.timers :as ts]
[beicon.core :as rx] [beicon.core :as rx]
[goog.functions :as f]
[rumext.alpha :as mf])) [rumext.alpha :as mf]))
(defn use-id
"Get a stable id value across rerenders."
[]
(mf/use-memo #(dm/str (uuid/next))))
(defn use-rxsub (defn use-rxsub
[ob] [ob]
(let [[state reset-state!] (mf/useState @ob)] (let [[state reset-state!] (mf/useState @ob)]
@ -191,7 +201,6 @@
[(deref state) ref])) [(deref state) ref]))
(defn use-stream (defn use-stream
"Wraps the subscription to a stream into a `use-effect` call" "Wraps the subscription to a stream into a `use-effect` call"
([stream on-subscribe] ([stream on-subscribe]
@ -205,6 +214,7 @@
;; https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state ;; https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state
(defn use-previous (defn use-previous
"Returns the value from previuous render cycle."
[value] [value]
(let [ref (mf/use-ref value)] (let [ref (mf/use-ref value)]
(mf/use-effect (mf/use-effect
@ -214,13 +224,27 @@
(mf/ref-val ref))) (mf/ref-val ref)))
(defn use-update-var (defn use-update-var
"Returns a var pointer what automatically updates with latest values."
[value] [value]
(let [ref (mf/use-var value)] (let [ptr (mf/use-var value)]
(mf/use-effect (mf/with-effect [value]
(mf/deps value) (reset! ptr value))
(fn [] ptr))
(reset! ref value)))
ref)) (defn use-ref-callback
"Returns a stable callback pointer what calls the interned
callback. The interned callback will be automatically updated on
each reander if the reference changes and works as noop if the
pointer references to nil value."
[f]
(let [ptr (mf/use-ref nil)]
(mf/with-effect [f]
(mf/set-ref-val! ptr #js {:f f}))
(mf/use-fn
(fn [& args]
(let [obj (mf/ref-val ptr)]
(when ^boolean obj
(apply (.-f obj) args)))))))
(defn use-equal-memo (defn use-equal-memo
[val] [val]
@ -258,4 +282,34 @@
#(cp/focus-objects objects focus))] #(cp/focus-objects objects focus))]
objects))) objects)))
(defn use-debounce
[ms value]
(let [[state update-state-fn] (mf/useState value)
update-fn (mf/use-memo (mf/deps ms) #(f/debounce update-state-fn ms))]
(mf/with-effect [value]
(update-fn value))
state))
(defn use-shared-state
"A specialized hook that adds persistence and inter-context reactivity
to the default mf/use-state hook.
The state is automatically persisted under the provided key on
localStorage. And it will keep watching events with type equals to
`key` for new values."
[key default]
(let [id (use-id)
state (mf/use-state (get @storage key default))
stream (mf/with-memo []
(->> mbc/stream
(rx/filter #(= (:type %) key))
(rx/filter #(not= (:id %) id))
(rx/map deref)))]
(mf/with-effect [@state key]
(mbc/emit! id key @state)
(swap! storage assoc key @state))
(use-stream stream (partial reset! state))
state))

36
frontend/src/app/main/ui/hooks/resize.cljs
View file

@ -8,6 +8,7 @@
(:require (:require
[app.common.geom.point :as gpt] [app.common.geom.point :as gpt]
[app.common.logging :as log] [app.common.logging :as log]
[app.common.spec :as us]
[app.main.ui.context :as ctx] [app.main.ui.context :as ctx]
[app.main.ui.hooks :as hooks] [app.main.ui.hooks :as hooks]
[app.util.dom :as dom] [app.util.dom :as dom]
@ -73,43 +74,38 @@
(defn use-resize-observer (defn use-resize-observer
[callback] [callback]
(assert (some? callback)) (us/assert! (some? callback) "the `callback` is mandatory")
(let [prev-val-ref (mf/use-ref nil) (let [prev-val-ref (mf/use-ref nil)
current-observer-ref (mf/use-ref nil) observer-ref (mf/use-ref nil)
callback (hooks/use-ref-callback callback)
callback-ref (hooks/use-update-var {:callback callback})
;; We use the ref as a callback when the dom node is ready (or change) ;; We use the ref as a callback when the dom node is ready (or change)
node-ref node-ref (mf/use-fn
(mf/use-callback
(fn [^js node] (fn [^js node]
(when (some? node) (when (some? node)
(let [^js current-observer (mf/ref-val current-observer-ref) (let [^js observer (mf/ref-val observer-ref)
^js prev-val (mf/ref-val prev-val-ref)] ^js prev-val (mf/ref-val prev-val-ref)]
(when (and (not= prev-val node) (some? current-observer)) (when (and (not= prev-val node) (some? observer))
(log/debug :action "disconnect" :js/prev-val prev-val :js/node node) (log/debug :action "disconnect" :js/prev-val prev-val :js/node node)
(.disconnect current-observer) (.disconnect observer)
(mf/set-ref-val! current-observer-ref nil)) (mf/set-ref-val! observer-ref nil))
(when (and (not= prev-val node) (some? node)) (when (and (not= prev-val node) (some? node))
(let [^js observer (let [^js observer (js/ResizeObserver.
(js/ResizeObserver. #(callback last-resize-type (dom/get-client-size node)))]
#(let [callback (get @callback-ref :callback)] (mf/set-ref-val! observer-ref observer)
(callback last-resize-type (dom/get-client-size node))))]
(mf/set-ref-val! current-observer-ref observer)
(log/debug :action "observe" :js/node node :js/observer observer) (log/debug :action "observe" :js/node node :js/observer observer)
(.observe observer node)))) (.observe observer node))))
(mf/set-ref-val! prev-val-ref node))))] (mf/set-ref-val! prev-val-ref node))))]
(mf/use-effect (mf/with-effect []
(fn []
;; On dismount we need to disconnect the current observer ;; On dismount we need to disconnect the current observer
(fn [] (fn []
(let [current-observer (mf/ref-val current-observer-ref)] (when-let [observer (mf/ref-val observer-ref)]
(when (some? current-observer)
(log/debug :action "disconnect") (log/debug :action "disconnect")
(.disconnect current-observer)))))) (.disconnect ^js observer))))
node-ref)) node-ref))

123
frontend/src/app/main/ui/workspace/colorpalette.cljs
View file

@ -6,11 +6,13 @@
(ns app.main.ui.workspace.colorpalette (ns app.main.ui.workspace.colorpalette
(:require (:require
[app.common.data.macros :as dm]
[app.main.data.workspace.colors :as mdc] [app.main.data.workspace.colors :as mdc]
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.components.color-bullet :as cb] [app.main.ui.components.color-bullet :as cb]
[app.main.ui.components.dropdown :refer [dropdown]] [app.main.ui.components.dropdown :refer [dropdown]]
[app.main.ui.hooks :as h]
[app.main.ui.hooks.resize :refer [use-resize-hook]] [app.main.ui.hooks.resize :refer [use-resize-hook]]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.util.dom :as dom] [app.util.dom :as dom]
@ -19,36 +21,21 @@
[app.util.object :as obj] [app.util.object :as obj]
[cuerdas.core :as str] [cuerdas.core :as str]
[goog.events :as events] [goog.events :as events]
[okulary.core :as l]
[rumext.alpha :as mf])) [rumext.alpha :as mf]))
;; --- Refs
(def palettes-ref
(-> (l/in [:library :palettes])
(l/derived st/state)))
(def selected-palette-ref
(-> (l/in [:workspace-global :selected-palette])
(l/derived st/state)))
(def selected-palette-size-ref
(-> (l/in [:workspace-global :selected-palette-size])
(l/derived st/state)))
;; --- Components ;; --- Components
(mf/defc palette-item
[{:keys [color]}]
(let [select-color
(fn [event]
(st/emit! (mdc/apply-color-from-palette color (kbd/alt? event))))]
(mf/defc palette-item
{::mf/wrap [mf/memo]}
[{:keys [color]}]
(letfn [(select-color [event]
(st/emit! (mdc/apply-color-from-palette color (kbd/alt? event))))]
[:div.color-cell {:on-click select-color} [:div.color-cell {:on-click select-color}
[:& cb/color-bullet {:color color}] [:& cb/color-bullet {:color color}]
[:& cb/color-name {:color color}]])) [:& cb/color-name {:color color}]]))
(mf/defc palette (mf/defc palette
[{:keys [current-colors recent-colors file-colors shared-libs selected]}] [{:keys [current-colors recent-colors file-colors shared-libs selected on-select]}]
(let [state (mf/use-state {:show-menu false}) (let [state (mf/use-state {:show-menu false})
width (:width @state 0) width (:width @state 0)
@ -97,54 +84,66 @@
(fn [_] (fn [_]
(let [dom (mf/ref-val container) (let [dom (mf/ref-val container)
width (obj/get dom "clientWidth")] width (obj/get dom "clientWidth")]
(swap! state assoc :width width))))] (swap! state assoc :width width))))
on-select-palette
(mf/use-fn
(mf/deps on-select)
(fn [event]
(let [node (dom/get-current-target event)
value (dom/get-attribute node "data-palette")]
(on-select (if (or (= "file" value) (= "recent" value))
(keyword value)
(parse-uuid value))))))]
(mf/use-layout-effect (mf/use-layout-effect
#(let [dom (mf/ref-val container) #(let [dom (mf/ref-val container)
width (obj/get dom "clientWidth")] width (obj/get dom "clientWidth")]
(swap! state assoc :width width))) (swap! state assoc :width width)))
(mf/use-effect (mf/with-effect []
#(let [key1 (events/listen js/window "resize" on-resize)] (let [key1 (events/listen js/window "resize" on-resize)]
(fn [] #(events/unlistenByKey key1)))
(events/unlistenByKey key1))))
[:div.color-palette {:ref parent-ref [:div.color-palette {:ref parent-ref
:class (dom/classnames :no-text (< size 72)) :class (dom/classnames :no-text (< size 72))
:style #js {"--height" (str size "px") :style #js {"--height" (dm/str size "px")
"--bullet-size" (str (if (< size 72) (- size 15) (- size 30)) "px")}} "--bullet-size" (dm/str (if (< size 72) (- size 15) (- size 30)) "px")}}
[:div.resize-area {:on-pointer-down on-pointer-down [:div.resize-area {:on-pointer-down on-pointer-down
:on-lost-pointer-capture on-lost-pointer-capture :on-lost-pointer-capture on-lost-pointer-capture
:on-mouse-move on-mouse-move}] :on-mouse-move on-mouse-move}]
[:& dropdown {:show (:show-menu @state) [:& dropdown {:show (:show-menu @state)
:on-close #(swap! state assoc :show-menu false)} :on-close #(swap! state assoc :show-menu false)}
[:ul.workspace-context-menu.palette-menu [:ul.workspace-context-menu.palette-menu
(for [[idx cur-library] (map-indexed vector (vals shared-libs))] (for [{:keys [data id] :as library} (vals shared-libs)]
(let [colors (-> cur-library (get-in [:data :colors]) vals)] (let [colors (-> data :colors vals)]
[:li.palette-library [:li.palette-library
{:key (str "library-" idx) {:key (dm/str "library-" id)
:on-click #(st/emit! (mdc/change-palette-selected (:id cur-library)))} :on-click on-select-palette
(when (= selected (:id cur-library)) i/tick) :data-palette (dm/str id)}
[:div.library-name (str (:name cur-library) " " (str/format "(%s)" (count colors)))] (when (= selected id) i/tick)
[:div.library-name (str (:name library) " " (str/ffmt "(%)" (count colors)))]
[:div.color-sample [:div.color-sample
(for [[idx {:keys [color]}] (map-indexed vector (take 7 colors))] (for [[i {:keys [color]}] (map-indexed vector (take 7 colors))]
[:& cb/color-bullet {:key (str "color-" idx) [:& cb/color-bullet {:key (dm/str "color-" i)
:color color}])]])) :color color}])]]))
[:li.palette-library [:li.palette-library
{:on-click #(st/emit! (mdc/change-palette-selected :file))} {:on-click on-select-palette
:data-palette "file"}
(when (= selected :file) i/tick) (when (= selected :file) i/tick)
[:div.library-name (str (tr "workspace.libraries.colors.file-library") [:div.library-name (dm/str
(str/format " (%s)" (count file-colors)))] (tr "workspace.libraries.colors.file-library")
(str/ffmt " (%)" (count file-colors)))]
[:div.color-sample [:div.color-sample
(for [[idx color] (map-indexed vector (take 7 (vals file-colors))) ] (for [[i color] (map-indexed vector (take 7 (vals file-colors))) ]
[:& cb/color-bullet {:key (str "color-" idx) [:& cb/color-bullet {:key (dm/str "color-" i)
:color color}])]] :color color}])]]
[:li.palette-library [:li.palette-library
{:on-click #(st/emit! (mdc/change-palette-selected :recent))} {:on-click on-select-palette
:data-palette "recent"}
(when (= selected :recent) i/tick) (when (= selected :recent) i/tick)
[:div.library-name (str (tr "workspace.libraries.colors.recent-colors") [:div.library-name (str (tr "workspace.libraries.colors.recent-colors")
(str/format " (%s)" (count recent-colors)))] (str/format " (%s)" (count recent-colors)))]
@ -178,34 +177,32 @@
(let [recent-colors (mf/deref refs/workspace-recent-colors) (let [recent-colors (mf/deref refs/workspace-recent-colors)
file-colors (mf/deref refs/workspace-file-colors) file-colors (mf/deref refs/workspace-file-colors)
shared-libs (mf/deref refs/workspace-libraries) shared-libs (mf/deref refs/workspace-libraries)
selected (or (mf/deref selected-palette-ref) :recent) selected (h/use-shared-state mdc/colorpalette-selected-broadcast-key :recent)
current-library-colors (mf/use-state [])]
(mf/use-effect colors (mf/use-state [])
(mf/deps selected) on-select (mf/use-fn #(reset! selected %))]
(mf/with-effect [@selected]
(fn [] (fn []
(reset! current-library-colors (reset! colors
(into [] (into []
(cond (cond
(= selected :recent) (reverse recent-colors) (= @selected :recent) (reverse recent-colors)
(= selected :file) (->> (vals file-colors) (sort-by :name)) (= @selected :file) (->> (vals file-colors) (sort-by :name))
:else (->> (library->colors shared-libs selected) (sort-by :name))))))) :else (->> (library->colors shared-libs @selected) (sort-by :name)))))))
(mf/use-effect (mf/with-effect [recent-colors @selected]
(mf/deps recent-colors) (when (= @selected :recent)
(fn [] (reset! colors (reverse recent-colors))))
(when (= selected :recent)
(reset! current-library-colors (reverse recent-colors)))))
(mf/use-effect (mf/with-effect [file-colors @selected]
(mf/deps file-colors) (when (= @selected :file)
(fn [] (reset! colors (into [] (->> (vals file-colors)
(when (= selected :file) (sort-by :name))))))
(reset! current-library-colors (into [] (->> (vals file-colors)
(sort-by :name)))))))
[:& palette {:current-colors @current-library-colors [:& palette {:current-colors @colors
:recent-colors recent-colors :recent-colors recent-colors
:file-colors file-colors :file-colors file-colors
:shared-libs shared-libs :shared-libs shared-libs
:selected selected}])) :selected @selected
:on-select on-select}]))

273
frontend/src/app/main/ui/workspace/colorpicker.cljs
View file

@ -6,7 +6,6 @@
(ns app.main.ui.workspace.colorpicker (ns app.main.ui.workspace.colorpicker
(:require (:require
[app.common.colors :as clr]
[app.main.data.modal :as modal] [app.main.data.modal :as modal]
[app.main.data.workspace.colors :as dc] [app.main.data.workspace.colors :as dc]
[app.main.data.workspace.libraries :as dwl] [app.main.data.workspace.libraries :as dwl]
@ -41,171 +40,74 @@
(def viewport (def viewport
(l/derived :vport refs/workspace-local)) (l/derived :vport refs/workspace-local))
(def editing-spot-state-ref
(l/derived :editing-stop refs/workspace-global))
(def current-gradient-ref
(l/derived :current-gradient refs/workspace-global))
;; --- Color Picker Modal ;; --- Color Picker Modal
(defn color->components [value opacity]
(let [value (if (uc/hex? value) value clr/black)
[r g b] (uc/hex->rgb value)
[h s v] (uc/hex->hsv value)]
{:hex (or value "000000")
:alpha (or opacity 1)
:r r :g g :b b
:h h :s s :v v}))
(defn data->state [{:keys [color opacity gradient]}]
(let [type (cond
(nil? gradient) :color
(= :linear (:type gradient)) :linear-gradient
(= :radial (:type gradient)) :radial-gradient)
parse-stop (fn [{:keys [offset color opacity]}]
(vector offset (color->components color opacity)))
stops (when gradient
(map parse-stop (:stops gradient)))
current-color (if (nil? gradient)
(color->components color opacity)
(-> stops first second))
gradient-data (select-keys gradient [:start-x :start-y
:end-x :end-y
:width])]
(cond-> {:type type
:current-color current-color}
gradient (assoc :gradient-data gradient-data)
stops (assoc :stops (into {} stops))
stops (assoc :editing-stop (-> stops first first)))))
(defn state->data [{:keys [type current-color stops gradient-data]}]
(if (= type :color)
{:color (:hex current-color)
:opacity (:alpha current-color)}
(let [gradient-type (case type
:linear-gradient :linear
:radial-gradient :radial)
parse-stop (fn [[offset {:keys [hex alpha]}]]
(hash-map :offset offset
:color hex
:opacity alpha))]
{:gradient (-> {:type gradient-type
:stops (mapv parse-stop stops)}
(merge gradient-data))})))
(defn create-gradient-data [type]
{:start-x 0.5
:start-y (if (= type :linear-gradient) 0.0 0.5)
:end-x 0.5
:end-y 1
:width 1.0})
(mf/defc colorpicker (mf/defc colorpicker
[{:keys [data disable-gradient disable-opacity on-change on-accept]}] [{:keys [data disable-gradient disable-opacity on-change on-accept]}]
(let [state (mf/use-state (data->state data)) (let [state (mf/deref refs/colorpicker)
active-tab (mf/use-state :ramp #_:harmony #_:hsva) node-ref (mf/use-ref)
ref-picker (mf/use-ref)
dirty? (mf/use-var false)
last-color (mf/use-var data)
;; TODO: I think we need to put all this picking state under
;; the same object for avoid creating adhoc refs for each
;; value
picking-color? (mf/deref picking-color?) picking-color? (mf/deref picking-color?)
picked-color (mf/deref picked-color) picked-color (mf/deref picked-color)
picked-color-select (mf/deref picked-color-select) picked-color-select (mf/deref picked-color-select)
editing-spot-state (mf/deref editing-spot-state-ref) current-color (:current-color state)
current-gradient (mf/deref current-gradient-ref)
current-color (:current-color @state) active-tab (mf/use-state :ramp #_:harmony #_:hsva)
set-ramp-tab! (mf/use-fn #(reset! active-tab :ramp))
change-tab set-harmony-tab! (mf/use-fn #(reset! active-tab :harmony))
(fn [tab] set-hsva-tab! (mf/use-fn #(reset! active-tab :hsva))
#(reset! active-tab tab))
handle-change-color handle-change-color
(fn [changes] (mf/use-fn #(st/emit! (dc/update-colorpicker-color %)))
(let [editing-stop (:editing-stop @state)]
(swap! state #(cond-> %
:always
(update :current-color merge changes)
(not editing-stop)
(-> (assoc :type :color)
(dissoc :gradient-data :stops :editing-stops))
editing-stop
(update-in [:stops editing-stop] merge changes)))
(reset! dirty? true)))
handle-click-picker handle-click-picker
(mf/use-fn
(mf/deps picking-color?)
(fn [] (fn []
(if picking-color? (if picking-color?
(do (modal/disallow-click-outside!) (do (modal/disallow-click-outside!)
(st/emit! (dc/stop-picker))) (st/emit! (dc/stop-picker)))
(do (modal/allow-click-outside!) (do (modal/allow-click-outside!)
(st/emit! (dc/start-picker))))) (st/emit! (dc/start-picker))))))
handle-change-stop handle-change-stop
(mf/use-fn
(fn [offset] (fn [offset]
(when-let [offset-color (get-in @state [:stops offset])] (st/emit! (dc/select-colorpicker-gradient-stop offset))))
(swap! state assoc
:current-color offset-color
:editing-stop offset)
(st/emit! (dc/select-gradient-stop offset))))
on-select-library-color on-select-library-color
(mf/use-fn
(fn [color] (fn [color]
(let [editing-stop (:editing-stop @state) (on-change color)))
is-gradient? (some? (:gradient color))]
(if is-gradient?
(st/emit! (dc/start-gradient (:gradient color)))
(st/emit! (dc/stop-gradient)))
(if (and (some? editing-stop) (not is-gradient?))
(handle-change-color (color->components (:color color) (:opacity color)))
(do (reset! dirty? false)
(reset! state (-> (data->state color)
(assoc :editing-stop nil)))
(on-change color)))))
on-add-library-color on-add-library-color
(mf/use-fn
(mf/deps state)
(fn [_] (fn [_]
(st/emit! (dwl/add-color (state->data @state)))) (st/emit! (dwl/add-color (dc/get-color-from-colorpicker-state state)))))
on-activate-gradient on-activate-linear-gradient
(fn [type] (mf/use-fn #(st/emit! (dc/activate-colorpicker-gradient :linear-gradient)))
(fn []
(reset! dirty? true) on-activate-radial-gradient
(if (= type (:type @state)) (mf/use-fn #(st/emit! (dc/activate-colorpicker-gradient :radial-gradient)))]
(do
(swap! state assoc :type :color) ;; Initialize colorpicker state
(swap! state dissoc :editing-stop :stops :gradient-data) (mf/with-effect []
(st/emit! (dc/stop-gradient))) (st/emit! (dc/initialize-colorpicker on-change))
(let [gradient-data (create-gradient-data type)] (partial st/emit! (dc/finalize-colorpicker)))
(swap! state assoc :type type :gradient-data gradient-data)
(when (not (:stops @state)) ;; Update colorpicker with external color changes
(swap! state assoc (mf/with-effect [data]
:editing-stop 0 (st/emit! (dc/update-colorpicker data)))
:stops {0 (:current-color @state)
1 (-> (:current-color @state)
(assoc :alpha 0))}))))))]
;; Updates the CSS color variable when there is a change in the color ;; Updates the CSS color variable when there is a change in the color
(mf/use-effect (mf/with-effect [current-color]
(mf/deps current-color) (let [node (mf/ref-val node-ref)
(fn [] (let [node (mf/ref-val ref-picker)
{:keys [r g b h v]} current-color {:keys [r g b h v]} current-color
rgb [r g b] rgb [r g b]
hue-rgb (uc/hsv->rgb [h 1.0 255]) hue-rgb (uc/hsv->rgb [h 1.0 255])
@ -220,19 +122,10 @@
(dom/set-css-property! node "--color" (str/join ", " rgb)) (dom/set-css-property! node "--color" (str/join ", " rgb))
(dom/set-css-property! node "--hue-rgb" (str/join ", " hue-rgb)) (dom/set-css-property! node "--hue-rgb" (str/join ", " hue-rgb))
(dom/set-css-property! node "--saturation-grad-from" (format-hsl hsl-from)) (dom/set-css-property! node "--saturation-grad-from" (format-hsl hsl-from))
(dom/set-css-property! node "--saturation-grad-to" (format-hsl hsl-to))))) (dom/set-css-property! node "--saturation-grad-to" (format-hsl hsl-to))))
;; When closing the modal we update the recent-color list
(mf/use-effect
#(fn []
(st/emit! (dc/stop-picker))
(when @last-color
(st/emit! (dwl/add-recent-color @last-color)))))
;; Updates color when used el pixel picker ;; Updates color when used el pixel picker
(mf/use-effect (mf/with-effect [picking-color? picked-color picked-color-select]
(mf/deps picking-color? picked-color picked-color-select)
(fn []
(when (and picking-color? picked-color picked-color-select) (when (and picking-color? picked-color picked-color-select)
(let [[r g b alpha] picked-color (let [[r g b alpha] picked-color
hex (uc/rgb->hex [r g b]) hex (uc/rgb->hex [r g b])
@ -240,48 +133,9 @@
(handle-change-color {:hex hex (handle-change-color {:hex hex
:r r :g g :b b :r r :g g :b b
:h h :s s :v v :h h :s s :v v
:alpha (/ alpha 255)}))))) :alpha (/ alpha 255)}))))
;; Changes when another gradient handler is selected [:div.colorpicker {:ref node-ref}
(mf/use-effect
(mf/deps editing-spot-state)
#(when (not= editing-spot-state (:editing-stop @state))
(handle-change-stop (or editing-spot-state 0))))
;; Changes on the viewport when moving a gradient handler
(mf/use-effect
(mf/deps current-gradient)
(fn []
(when current-gradient
(let [gradient-data (select-keys current-gradient [:start-x :start-y
:end-x :end-y
:width])]
(when (not= (:gradient-data @state) gradient-data)
(reset! dirty? true)
(swap! state assoc :gradient-data gradient-data))))))
;; Check if we've opened a color with gradient
(mf/use-effect
(fn []
(when (:gradient data)
(st/emit! (dc/start-gradient (:gradient data))))
;; on-unmount we stop the handlers
#(st/emit! (dc/stop-gradient))))
;; Send the properties to the store
(mf/use-effect
(mf/deps @state)
(fn []
(when @dirty?
(let [color (state->data @state)]
(reset! dirty? false)
(reset! last-color color)
(when (:gradient color)
(st/emit! (dc/start-gradient (:gradient color))))
(on-change color)))))
[:div.colorpicker {:ref ref-picker}
[:div.colorpicker-content [:div.colorpicker-content
[:div.top-actions [:div.top-actions
[:button.picker-btn [:button.picker-btn
@ -292,60 +146,71 @@
(when (not disable-gradient) (when (not disable-gradient)
[:div.gradients-buttons [:div.gradients-buttons
[:button.gradient.linear-gradient [:button.gradient.linear-gradient
{:on-click (on-activate-gradient :linear-gradient) {:on-click on-activate-linear-gradient
:class (when (= :linear-gradient (:type @state)) "active")}] :class (when (= :linear-gradient (:type state)) "active")}]
[:button.gradient.radial-gradient [:button.gradient.radial-gradient
{:on-click (on-activate-gradient :radial-gradient) {:on-click on-activate-radial-gradient
:class (when (= :radial-gradient (:type @state)) "active")}]])] :class (when (= :radial-gradient (:type state)) "active")}]])]
[:& gradients {:type (:type @state)
:stops (:stops @state) (when (or (= (:type state) :linear-gradient)
:editing-stop (:editing-stop @state) (= (:type state) :radial-gradient))
:on-select-stop handle-change-stop}] [:& gradients
{:stops (:stops state)
:editing-stop (:editing-stop state)
:on-select-stop handle-change-stop}])
[:div.colorpicker-tabs [:div.colorpicker-tabs
[:div.colorpicker-tab.tooltip.tooltip-bottom.tooltip-expand [:div.colorpicker-tab.tooltip.tooltip-bottom.tooltip-expand
{:class (when (= @active-tab :ramp) "active") {:class (when (= @active-tab :ramp) "active")
:alt (tr "workspace.libraries.colors.rgba") :alt (tr "workspace.libraries.colors.rgba")
:on-click (change-tab :ramp)} i/picker-ramp] :on-click set-ramp-tab!} i/picker-ramp]
[:div.colorpicker-tab.tooltip.tooltip-bottom.tooltip-expand [:div.colorpicker-tab.tooltip.tooltip-bottom.tooltip-expand
{:class (when (= @active-tab :harmony) "active") {:class (when (= @active-tab :harmony) "active")
:alt (tr "workspace.libraries.colors.rgb-complementary") :alt (tr "workspace.libraries.colors.rgb-complementary")
:on-click (change-tab :harmony)} i/picker-harmony] :on-click set-harmony-tab!} i/picker-harmony]
[:div.colorpicker-tab.tooltip.tooltip-bottom.tooltip-expand [:div.colorpicker-tab.tooltip.tooltip-bottom.tooltip-expand
{:class (when (= @active-tab :hsva) "active") {:class (when (= @active-tab :hsva) "active")
:alt (tr "workspace.libraries.colors.hsv") :alt (tr "workspace.libraries.colors.hsv")
:on-click (change-tab :hsva)} i/picker-hsv]] :on-click set-hsva-tab!} i/picker-hsv]]
(if picking-color? (if picking-color?
[:div.picker-detail-wrapper [:div.picker-detail-wrapper
[:div.center-circle] [:div.center-circle]
[:canvas#picker-detail {:width 200 :height 160}]] [:canvas#picker-detail {:width 200 :height 160}]]
(case @active-tab (case @active-tab
:ramp [:& ramp-selector {:color current-color :ramp
[:& ramp-selector
{:color current-color
:disable-opacity disable-opacity :disable-opacity disable-opacity
:on-change handle-change-color :on-change handle-change-color
:on-start-drag #(st/emit! (dwu/start-undo-transaction)) :on-start-drag #(st/emit! (dwu/start-undo-transaction))
:on-finish-drag #(st/emit! (dwu/commit-undo-transaction))}] :on-finish-drag #(st/emit! (dwu/commit-undo-transaction))}]
:harmony [:& harmony-selector {:color current-color :harmony
[:& harmony-selector
{:color current-color
:disable-opacity disable-opacity :disable-opacity disable-opacity
:on-change handle-change-color :on-change handle-change-color
:on-start-drag #(st/emit! (dwu/start-undo-transaction)) :on-start-drag #(st/emit! (dwu/start-undo-transaction))
:on-finish-drag #(st/emit! (dwu/commit-undo-transaction))}] :on-finish-drag #(st/emit! (dwu/commit-undo-transaction))}]
:hsva [:& hsva-selector {:color current-color :hsva
[:& hsva-selector
{:color current-color
:disable-opacity disable-opacity :disable-opacity disable-opacity
:on-change handle-change-color :on-change handle-change-color
:on-start-drag #(st/emit! (dwu/start-undo-transaction)) :on-start-drag #(st/emit! (dwu/start-undo-transaction))
:on-finish-drag #(st/emit! (dwu/commit-undo-transaction))}] :on-finish-drag #(st/emit! (dwu/commit-undo-transaction))}]
nil)) nil))
[:& color-inputs {:type (if (= @active-tab :hsva) :hsv :rgb) [:& color-inputs
{:type (if (= @active-tab :hsva) :hsv :rgb)
:disable-opacity disable-opacity :disable-opacity disable-opacity
:color current-color :color current-color
:on-change handle-change-color}] :on-change handle-change-color}]
[:& libraries {:current-color current-color [:& libraries
{:current-color current-color
:disable-gradient disable-gradient :disable-gradient disable-gradient
:disable-opacity disable-opacity :disable-opacity disable-opacity
:on-select-color on-select-library-color :on-select-color on-select-library-color
@ -355,7 +220,7 @@
[:div.actions [:div.actions
[:button.btn-primary.btn-large [:button.btn-primary.btn-large
{:on-click (fn [] {:on-click (fn []
(on-accept (state->data @state)) (on-accept (dc/get-color-from-colorpicker-state state))
(modal/hide!))} (modal/hide!))}
(tr "workspace.libraries.colors.save-color")]])]])) (tr "workspace.libraries.colors.save-color")]])]]))

8
frontend/src/app/main/ui/workspace/colorpicker/color_inputs.cljs
View file

@ -11,13 +11,17 @@
[app.util.dom :as dom] [app.util.dom :as dom]
[rumext.alpha :as mf])) [rumext.alpha :as mf]))
(defn parse-hex
[val]
(if (= (first val) \#)
val
(str \# val)))
(mf/defc color-inputs [{:keys [type color disable-opacity on-change]}] (mf/defc color-inputs [{:keys [type color disable-opacity on-change]}]
(let [{red :r green :g blue :b (let [{red :r green :g blue :b
hue :h saturation :s value :v hue :h saturation :s value :v
hex :hex alpha :alpha} color hex :hex alpha :alpha} color
parse-hex (fn [val] (if (= (first val) \#) val (str \# val)))
refs {:hex (mf/use-ref nil) refs {:hex (mf/use-ref nil)
:r (mf/use-ref nil) :r (mf/use-ref nil)
:g (mf/use-ref nil) :g (mf/use-ref nil)

27
frontend/src/app/main/ui/workspace/colorpicker/gradients.cljs
View file

@ -6,32 +6,31 @@
(ns app.main.ui.workspace.colorpicker.gradients (ns app.main.ui.workspace.colorpicker.gradients
(:require (:require
[app.common.data.macros :as dm]
[cuerdas.core :as str] [cuerdas.core :as str]
[rumext.alpha :as mf])) [rumext.alpha :as mf]))
(defn gradient->string [stops] (defn- format-rgba
(let [format-stop [{:keys [r g b alpha offset]}]
(fn [[offset {:keys [r g b alpha]}]] (str/ffmt "rgba(%1, %2, %3, %4) %5%%" r g b alpha (* offset 100)))
(str/fmt "rgba(%s, %s, %s, %s) %s"
r g b alpha (str (* offset 100) "%")))
gradient-css (str/join "," (map format-stop stops))] (defn- gradient->string [stops]
(str/fmt "linear-gradient(90deg, %s)" gradient-css))) (let [gradient-css (str/join ", " (map format-rgba stops))]
(str/ffmt "linear-gradient(90deg, %1)" gradient-css)))
(mf/defc gradients [{:keys [type stops editing-stop on-select-stop]}] (mf/defc gradients
(when (#{:linear-gradient :radial-gradient} type) [{:keys [stops editing-stop on-select-stop]}]
[:div.gradient-stops [:div.gradient-stops
[:div.gradient-background-wrapper [:div.gradient-background-wrapper
[:div.gradient-background {:style {:background (gradient->string stops)}}]] [:div.gradient-background {:style {:background (gradient->string stops)}}]]
[:div.gradient-stop-wrapper [:div.gradient-stop-wrapper
(for [[offset value] stops] (for [{:keys [offset hex r g b alpha] :as value} stops]
[:div.gradient-stop [:div.gradient-stop
{:class (when (= editing-stop offset) "active") {:class (when (= editing-stop offset) "active")
:on-click (partial on-select-stop offset) :on-click (partial on-select-stop offset)
:style {:left (str (* offset 100) "%")}} :style {:left (dm/str (* offset 100) "%")}
:key (dm/str offset)}
(let [{:keys [hex r g b alpha]} value]
[:*
[:div.gradient-stop-color {:style {:background-color hex}}] [:div.gradient-stop-color {:style {:background-color hex}}]
[:div.gradient-stop-alpha {:style {:background-color (str/format "rgba(%s, %s, %s, %s)" r g b alpha)}}]])])]])) [:div.gradient-stop-alpha {:style {:background-color (str/ffmt "rgba(%1, %2, %3, %4)" r g b alpha)}}]])]])

75
frontend/src/app/main/ui/workspace/colorpicker/libraries.cljs
View file

@ -6,90 +6,85 @@
(ns app.main.ui.workspace.colorpicker.libraries (ns app.main.ui.workspace.colorpicker.libraries
(:require (:require
[app.common.uuid :refer [uuid]] [app.common.data.macros :as dm]
[app.main.data.workspace.colors :as dc] [app.main.data.workspace.colors :as dc]
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.components.color-bullet :refer [color-bullet]] [app.main.ui.components.color-bullet :refer [color-bullet]]
[app.main.ui.hooks :as h]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.util.dom :as dom] [app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]] [app.util.i18n :as i18n :refer [tr]]
[okulary.core :as l]
[rumext.alpha :as mf])) [rumext.alpha :as mf]))
(def selected-palette-ref
(-> (l/in [:workspace-global :selected-palette-colorpicker])
(l/derived st/state)))
(mf/defc libraries (mf/defc libraries
[{:keys [on-select-color on-add-library-color disable-gradient disable-opacity]}] [{:keys [on-select-color on-add-library-color disable-gradient disable-opacity]}]
(let [selected-library (or (mf/deref selected-palette-ref) :recent) (let [selected (h/use-shared-state dc/colorpicker-selected-broadcast-key :recent)
current-library-colors (mf/use-state []) current-colors (mf/use-state [])
shared-libs (mf/deref refs/workspace-libraries) shared-libs (mf/deref refs/workspace-libraries)
file-colors (mf/deref refs/workspace-file-colors) file-colors (mf/deref refs/workspace-file-colors)
recent-colors (mf/deref refs/workspace-recent-colors) recent-colors (mf/deref refs/workspace-recent-colors)
parse-selected on-library-change
(fn [selected-str] (mf/use-fn
(if (#{"recent" "file"} selected-str) (fn [event]
(keyword selected-str) (let [val (dom/get-target-val event)]
(uuid selected-str))) (reset! selected
(if (or (= val "recent")
(= val "file"))
(keyword val)
(parse-uuid val))))))
check-valid-color? (fn [color] check-valid-color?
(fn [color]
(and (or (not disable-gradient) (not (:gradient color))) (and (or (not disable-gradient) (not (:gradient color)))
(or (not disable-opacity) (= 1 (:opacity color)))))] (or (not disable-opacity) (= 1 (:opacity color)))))]
;; Load library colors when the select is changed ;; Load library colors when the select is changed
(mf/use-effect (mf/with-effect [@selected recent-colors file-colors]
(mf/deps selected-library) (let [colors (cond
(fn [] (= @selected :recent)
(let [mapped-colors
(cond
(= selected-library :recent)
;; The `map?` check is to keep backwards compatibility. We transform from string to map ;; The `map?` check is to keep backwards compatibility. We transform from string to map
(map #(if (map? %) % (hash-map :color %)) (reverse (or recent-colors []))) (map #(if (map? %) % {:color %}) (reverse (or recent-colors [])))
(= selected-library :file) (= @selected :file)
(vals file-colors) (vals file-colors)
:else ;; Library UUID :else ;; Library UUID
(->> (get-in shared-libs [selected-library :data :colors]) (as-> @selected file-id
(->> (get-in shared-libs [file-id :data :colors])
(vals) (vals)
(map #(merge % {:file-id selected-library}))))] (map #(assoc % :file-id file-id)))))]
(reset! current-library-colors (into [] (filter check-valid-color?) mapped-colors))))) (reset! current-colors (into [] (filter check-valid-color?) colors))))
;; If the file colors change and the file option is selected updates the state ;; If the file colors change and the file option is selected updates the state
(mf/use-effect (mf/with-effect [file-colors]
(mf/deps file-colors) (when (= @selected :file)
(fn [] (when (= selected-library :file)
(let [colors (vals file-colors)] (let [colors (vals file-colors)]
(reset! current-library-colors (into [] (filter check-valid-color?) colors)))))) (reset! current-colors (into [] (filter check-valid-color?) colors)))))
[:div.libraries [:div.libraries
[:select {:on-change (fn [e] [:select {:on-change on-library-change :value (name @selected)}
(when-let [val (parse-selected (dom/get-target-val e))]
(st/emit! (dc/change-palette-selected-colorpicker val))))
:value (name selected-library)}
[:option {:value "recent"} (tr "workspace.libraries.colors.recent-colors")] [:option {:value "recent"} (tr "workspace.libraries.colors.recent-colors")]
[:option {:value "file"} (tr "workspace.libraries.colors.file-library")] [:option {:value "file"} (tr "workspace.libraries.colors.file-library")]
(for [[_ {:keys [name id]}] shared-libs] (for [[_ {:keys [name id]}] shared-libs]
[:option {:key id [:option {:key id :value id} name])]
:value id} name])]
[:div.selected-colors [:div.selected-colors
(when (= selected-library :file) (when (= @selected :file)
[:div.color-bullet.button.plus-button {:style {:background-color "var(--color-white)"} [:div.color-bullet.button.plus-button {:style {:background-color "var(--color-white)"}
:on-click on-add-library-color} :on-click on-add-library-color}
i/plus]) i/plus])
[:div.color-bullet.button {:style {:background-color "var(--color-white)"} [:div.color-bullet.button {:style {:background-color "var(--color-white)"}
:on-click #(st/emit! (dc/show-palette selected-library))} :on-click #(st/emit! (dc/show-palette @selected))}
i/palette] i/palette]
(for [[idx color] (map-indexed vector @current-library-colors)] (for [[idx color] (map-indexed vector @current-colors)]
[:& color-bullet {:key (str "color-" idx) [:& color-bullet
{:key (dm/str "color-" idx)
:color color :color color
:on-click #(on-select-color color)}])]])) :on-click on-select-color}])]]))

134
frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs
View file

@ -7,6 +7,7 @@
(ns app.main.ui.workspace.sidebar.options.rows.color-row (ns app.main.ui.workspace.sidebar.options.rows.color-row
(:require (:require
[app.common.data :as d] [app.common.data :as d]
[app.common.data.macros :as dm]
[app.common.pages :as cp] [app.common.pages :as cp]
[app.main.data.modal :as modal] [app.main.data.modal :as modal]
[app.main.refs :as refs] [app.main.refs :as refs]
@ -22,34 +23,8 @@
[app.util.i18n :as i18n :refer [tr]] [app.util.i18n :as i18n :refer [tr]]
[rumext.alpha :as mf])) [rumext.alpha :as mf]))
(defn color-picker-callback (defn opacity->string
[color disable-gradient disable-opacity handle-change-color handle-open handle-close] [opacity]
(fn [event]
(let [color
(cond
(uc/multiple? color)
{:color cp/default-color
:opacity 1}
(= :multiple (:opacity color))
(assoc color :opacity 1)
:else
color)
x (.-clientX event)
y (.-clientY event)
props {:x x
:y y
:disable-gradient disable-gradient
:disable-opacity disable-opacity
:on-change handle-change-color
:on-close handle-close
:data color}]
(handle-open color)
(modal/show! :colorpicker props))))
(defn opacity->string [opacity]
(if (= opacity :multiple) (if (= opacity :multiple)
"" ""
(str (-> opacity (str (-> opacity
@ -57,7 +32,8 @@
(* 100) (* 100)
(fmt/format-number))))) (fmt/format-number)))))
(defn remove-multiple [v] (defn remove-multiple
[v]
(if (= v :multiple) nil v)) (if (= v :multiple) nil v))
(mf/defc color-row (mf/defc color-row
@ -68,64 +44,88 @@
file-colors (mf/deref refs/workspace-file-colors) file-colors (mf/deref refs/workspace-file-colors)
shared-libs (mf/deref refs/workspace-libraries) shared-libs (mf/deref refs/workspace-libraries)
hover-detach (mf/use-state false) hover-detach (mf/use-state false)
on-change (h/use-ref-callback on-change)
on-change-var (h/use-update-var {:fn on-change})
src-colors (if (= (:file-id color) current-file-id) src-colors (if (= (:file-id color) current-file-id)
file-colors file-colors
(get-in shared-libs [(:file-id color) :data :colors])) (dm/get-in shared-libs [(:file-id color) :data :colors]))
color-name (get-in src-colors [(:id color) :name]) color-name (dm/get-in src-colors [(:id color) :name])
parse-color (fn [color] parse-color
(-> color (mf/use-fn
(update :color #(or % (:value color))))) (fn [color]
(update color :color #(or % (:value color)))))
detach-value (fn [] detach-value
(when on-detach (on-detach color))) (mf/use-fn
(mf/deps on-detach color)
(fn []
(when on-detach
(on-detach color))))
change-value (fn [new-value] handle-select
(when (:fn @on-change-var) ((:fn @on-change-var) (-> color (mf/use-fn
(mf/deps select-only color)
(fn []
(select-only color)))
handle-value-change
(mf/use-fn
(mf/deps color on-change)
(fn [new-value]
(on-change (-> color
(assoc :color new-value) (assoc :color new-value)
(dissoc :gradient))))) (dissoc :gradient)))))
change-opacity (fn [new-opacity] handle-opacity-change
(when (:fn @on-change-var) ((:fn @on-change-var) (assoc color (mf/use-fn
:opacity new-opacity (mf/deps color on-change)
(fn [value]
(on-change (assoc color
:opacity (/ value 100)
:id nil :id nil
:file-id nil)))) :file-id nil))))
handle-pick-color (fn [color] handle-click-color
(when (:fn @on-change-var) ((:fn @on-change-var) (merge uc/empty-color color)))) (mf/use-fn
(mf/deps disable-gradient disable-opacity on-change on-close on-open)
(fn [color event]
(let [color (cond
(uc/multiple? color)
{:color cp/default-color
:opacity 1}
handle-select (fn [] (= :multiple (:opacity color))
(select-only color)) (assoc color :opacity 1)
handle-open (fn [color] :else
(when on-open (on-open (merge uc/empty-color color)))) color)
handle-close (fn [value opacity id file-id] {:keys [x y]} (dom/get-client-position event)
(when on-close (on-close value opacity id file-id)))
handle-value-change (fn [new-value] props {:x x
(-> new-value :y y
change-value)) :disable-gradient disable-gradient
:disable-opacity disable-opacity
:on-change #(on-change (merge uc/empty-color %))
:on-close (fn [value opacity id file-id]
(when on-close
(on-close value opacity id file-id)))
:data color}]
handle-opacity-change (fn [value] (when on-open
(change-opacity (/ value 100))) (on-open (merge uc/empty-color color)))
(modal/show! :colorpicker props))))
handle-click-color (color-picker-callback color
disable-gradient
disable-opacity
handle-pick-color
handle-open
handle-close)
prev-color (h/use-previous color) prev-color (h/use-previous color)
on-drop on-drop
(mf/use-fn
(mf/deps on-reorder)
(fn [_ data] (fn [_ data]
(on-reorder (:index data))) (on-reorder (:index data))))
[dprops dref] (if (some? on-reorder) [dprops dref] (if (some? on-reorder)
(h/use-sortable (h/use-sortable
@ -138,11 +138,9 @@
:name (str "Color row" index)}) :name (str "Color row" index)})
[nil nil])] [nil nil])]
(mf/use-effect (mf/with-effect [color prev-color]
(mf/deps color prev-color)
(fn []
(when (not= prev-color color) (when (not= prev-color color)
(modal/update-props! :colorpicker {:data (parse-color color)})))) (modal/update-props! :colorpicker {:data (parse-color color)})))
[:div.row-flex.color-data {:title title [:div.row-flex.color-data {:title title
:class (dom/classnames :class (dom/classnames

82
frontend/src/app/main/ui/workspace/viewport/gradients.cljs
View file

@ -19,7 +19,6 @@
[app.util.dom :as dom] [app.util.dom :as dom]
[beicon.core :as rx] [beicon.core :as rx]
[cuerdas.core :as str] [cuerdas.core :as str]
[okulary.core :as l]
[rumext.alpha :as mf])) [rumext.alpha :as mf]))
(def gradient-line-stroke-width 2) (def gradient-line-stroke-width 2)
@ -32,12 +31,6 @@
(def gradient-square-stroke-color "var(--color-white)") (def gradient-square-stroke-color "var(--color-white)")
(def gradient-square-stroke-color-selected "var(--color-select)") (def gradient-square-stroke-color-selected "var(--color-select)")
(def editing-spot-ref
(l/derived (l/in [:workspace-global :editing-stop]) st/state))
(def current-gradient-ref
(l/derived (l/in [:workspace-global :current-gradient]) st/state =))
(mf/defc shadow [{:keys [id x y width height offset]}] (mf/defc shadow [{:keys [id x y width height offset]}]
[:filter {:id id [:filter {:id id
:x x :x x
@ -130,24 +123,29 @@
(let [moving-point (mf/use-var nil) (let [moving-point (mf/use-var nil)
angle (+ 90 (gpt/angle from-p to-p)) angle (+ 90 (gpt/angle from-p to-p))
on-click (fn [position event] on-click
(fn [position event]
(dom/stop-propagation event) (dom/stop-propagation event)
(dom/prevent-default event) (dom/prevent-default event)
(when (#{:from-p :to-p} position) (when (#{:from-p :to-p} position)
(st/emit! (dc/select-gradient-stop (case position (st/emit! (dc/select-colorpicker-gradient-stop
(case position
:from-p 0 :from-p 0
:to-p 1))))) :to-p 1)))))
on-mouse-down (fn [position event] on-mouse-down
(fn [position event]
(dom/stop-propagation event) (dom/stop-propagation event)
(dom/prevent-default event) (dom/prevent-default event)
(reset! moving-point position) (reset! moving-point position)
(when (#{:from-p :to-p} position) (when (#{:from-p :to-p} position)
(st/emit! (dc/select-gradient-stop (case position (st/emit! (dc/select-colorpicker-gradient-stop
(case position
:from-p 0 :from-p 0
:to-p 1))))) :to-p 1)))))
on-mouse-up (fn [_position event] on-mouse-up
(fn [_position event]
(dom/stop-propagation event) (dom/stop-propagation event)
(dom/prevent-default event) (dom/prevent-default event)
(reset! moving-point nil))] (reset! moving-point nil))]
@ -230,32 +228,19 @@
:on-mouse-down (partial on-mouse-down :to-p) :on-mouse-down (partial on-mouse-down :to-p)
:on-mouse-up (partial on-mouse-up :to-p)}]])) :on-mouse-up (partial on-mouse-up :to-p)}]]))
(mf/defc gradient-handlers*
(mf/defc gradient-handlers [{:keys [zoom stops gradient editing-stop shape]}]
{::mf/wrap [mf/memo]} (let [transform (gsh/transform-matrix shape)
[{:keys [id zoom]}]
(let [current-change (mf/use-state {})
shape-ref (mf/use-memo (mf/deps id) #(refs/object-by-id id))
shape (mf/deref shape-ref)
gradient (mf/deref current-gradient-ref)
gradient (merge gradient @current-change)
editing-spot (mf/deref editing-spot-ref)
transform (gsh/transform-matrix shape)
transform-inverse (gsh/inverse-transform-matrix shape) transform-inverse (gsh/inverse-transform-matrix shape)
{:keys [x y width height] :as sr} (:selrect shape) {:keys [x y width height] :as sr} (:selrect shape)
[{start-color :color start-opacity :opacity} [{start-color :color start-opacity :opacity}
{end-color :color end-opacity :opacity}] (:stops gradient) {end-color :color end-opacity :opacity}] stops
from-p (-> (gpt/point (+ x (* width (:start-x gradient))) from-p (-> (gpt/point (+ x (* width (:start-x gradient)))
(+ y (* height (:start-y gradient)))) (+ y (* height (:start-y gradient))))
(gpt/transform transform)) (gpt/transform transform))
to-p (-> (gpt/point (+ x (* width (:end-x gradient))) to-p (-> (gpt/point (+ x (* width (:end-x gradient)))
(+ y (* height (:end-y gradient)))) (+ y (* height (:end-y gradient))))
(gpt/transform transform)) (gpt/transform transform))
@ -271,13 +256,12 @@
width-p (gpt/add from-p width-v) width-p (gpt/add from-p width-v)
change! change!
(mf/use-callback (mf/use-fn
(fn [changes] (fn [changes]
(swap! current-change merge changes) (st/emit! (dc/update-colorpicker-gradient changes))))
(st/emit! (dc/update-gradient changes))))
on-change-start on-change-start
(mf/use-callback (mf/use-fn
(mf/deps transform-inverse width height) (mf/deps transform-inverse width height)
(fn [point] (fn [point]
(let [point (gpt/transform point transform-inverse) (let [point (gpt/transform point transform-inverse)
@ -286,7 +270,7 @@
(change! {:start-x start-x :start-y start-y})))) (change! {:start-x start-x :start-y start-y}))))
on-change-finish on-change-finish
(mf/use-callback (mf/use-fn
(mf/deps transform-inverse width height) (mf/deps transform-inverse width height)
(fn [point] (fn [point]
(let [point (gpt/transform point transform-inverse) (let [point (gpt/transform point transform-inverse)
@ -295,7 +279,7 @@
(change! {:end-x end-x :end-y end-y})))) (change! {:end-x end-x :end-y end-y}))))
on-change-width on-change-width
(mf/use-callback (mf/use-fn
(mf/deps gradient-length width height) (mf/deps gradient-length width height)
(fn [point] (fn [point]
(let [scale-factor-y (/ gradient-length (/ height 2)) (let [scale-factor-y (/ gradient-length (/ height 2))
@ -304,11 +288,8 @@
(when (and norm-dist (d/num? norm-dist)) (when (and norm-dist (d/num? norm-dist))
(change! {:width norm-dist})))))] (change! {:width norm-dist})))))]
(when (and gradient
(= id (:shape-id gradient))
(not= (:type shape) :text))
[:& gradient-handler-transformed [:& gradient-handler-transformed
{:editing editing-spot {:editing editing-stop
:from-p from-p :from-p from-p
:to-p to-p :to-p to-p
:width-p (when (= :radial (:type gradient)) width-p) :width-p (when (= :radial (:type gradient)) width-p)
@ -317,4 +298,25 @@
:zoom zoom :zoom zoom
:on-change-start on-change-start :on-change-start on-change-start
:on-change-finish on-change-finish :on-change-finish on-change-finish
:on-change-width on-change-width}]))) :on-change-width on-change-width}]))
(mf/defc gradient-handlers
{::mf/wrap [mf/memo]}
[{:keys [id zoom]}]
(let [shape-ref (mf/use-memo (mf/deps id) #(refs/object-by-id id))
shape (mf/deref shape-ref)
state (mf/deref refs/colorpicker)
gradient (:gradient state)
stops (:stops state)
editing-stop (:editing-stop state)]
(when (and (some? gradient)
(= id (:shape-id gradient))
(not= (:type shape) :text))
[:& gradient-handlers*
{:zoom zoom
:gradient gradient
:stops stops
:editing-stop editing-stop
:shape shape}])))