mirror of
https://github.com/penpot/penpot.git
synced 2025-05-22 20:06:11 +02:00
♻️ Simplify token creation mechanism
This commit is contained in:
Andrey Antukh
parent
aa867adbd3
commit
f68b0117c4
3 changed files with 126 additions and 91 deletions
|
|
@ -18,7 +18,6 @@
|
|||
[app.main.data.helpers :as dsh]
|
||||
[app.main.data.notifications :as ntf]
|
||||
[app.main.data.workspace.shapes :as dwsh]
|
||||
[app.main.data.workspace.tokens.selected-set :as dwts]
|
||||
[app.main.ui.workspace.tokens.update :as wtu]
|
||||
[app.util.i18n :refer [tr]]
|
||||
[beicon.v2.core :as rx]
|
||||
|
|
@ -38,6 +37,14 @@
|
|||
(-> (dsh/lookup-file-data state)
|
||||
(get :tokens-lib)))
|
||||
|
||||
(defn lookup-token-set
|
||||
([state]
|
||||
(when-let [selected (dm/get-in state [:workspace-tokens :selected-token-set-name])]
|
||||
(lookup-token-set state selected)))
|
||||
([state name]
|
||||
(some-> (get-tokens-lib state)
|
||||
(ctob/get-set name))))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Helpers
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
|
@ -233,49 +240,72 @@
|
|||
(rx/of
|
||||
(drop-error (ex-data e))))))))
|
||||
|
||||
;; FIXME: the the name is very confusing
|
||||
(defn update-create-token
|
||||
[{:keys [token prev-token-name]}]
|
||||
(ptk/reify ::update-create-token
|
||||
(defn- create-token-with-set
|
||||
"A special case when a first token is created and no set exists"
|
||||
[token]
|
||||
(ptk/reify ::create-token-and-set
|
||||
ptk/WatchEvent
|
||||
(watch [_ _ _]
|
||||
(let [set-name "Global"
|
||||
|
||||
token-set
|
||||
(-> (ctob/make-token-set :name set-name)
|
||||
(ctob/add-token token))
|
||||
|
||||
hidden-theme
|
||||
(ctob/make-hidden-token-theme :sets [set-name])
|
||||
|
||||
changes
|
||||
(pcb/add-token-set (pcb/empty-changes) token-set)
|
||||
|
||||
changes
|
||||
(-> changes
|
||||
(pcb/add-token-theme hidden-theme)
|
||||
(pcb/update-active-token-themes #{ctob/hidden-token-theme-path} #{}))]
|
||||
|
||||
(rx/of (set-selected-token-set-name set-name)
|
||||
(dch/commit-changes changes))))))
|
||||
|
||||
(defn create-token
|
||||
[params]
|
||||
(let [token (ctob/make-token params)]
|
||||
(ptk/reify ::create-token
|
||||
ptk/WatchEvent
|
||||
(watch [it state _]
|
||||
(if-let [token-set (lookup-token-set state)]
|
||||
(let [data (dsh/lookup-file-data state)
|
||||
selected (dm/get-in state [:workspace-tokens :selected-token-set-name])
|
||||
|
||||
tokens-lib (get-tokens-lib state)
|
||||
token-set (if selected
|
||||
(some-> tokens-lib (ctob/get-set selected))
|
||||
(some-> tokens-lib (ctob/get-sets) (first)))
|
||||
|
||||
set-name (or (:name token-set) "Global")
|
||||
changes (if (not token-set)
|
||||
;; No set created add a global set
|
||||
(let [token-set (ctob/make-token-set :name set-name :tokens {(:name token) token})
|
||||
hidden-theme (ctob/make-hidden-token-theme :sets [set-name])
|
||||
active-theme-paths (some-> tokens-lib ctob/get-active-theme-paths)
|
||||
add-to-hidden-theme? (= active-theme-paths #{ctob/hidden-token-theme-path})
|
||||
base-changes (pcb/add-token-set (pcb/empty-changes) token-set)]
|
||||
(cond
|
||||
(not tokens-lib)
|
||||
(-> base-changes
|
||||
(pcb/add-token-theme hidden-theme)
|
||||
(pcb/update-active-token-themes #{ctob/hidden-token-theme-path} #{}))
|
||||
|
||||
add-to-hidden-theme?
|
||||
(let [prev-hidden-theme (ctob/get-theme tokens-lib ctob/hidden-token-theme-group ctob/hidden-token-theme-name)]
|
||||
(-> base-changes
|
||||
(pcb/update-token-theme (ctob/toggle-set prev-hidden-theme ctob/hidden-token-theme-path) prev-hidden-theme)))
|
||||
|
||||
:else base-changes))
|
||||
(-> (pcb/empty-changes it)
|
||||
changes (-> (pcb/empty-changes it)
|
||||
(pcb/with-library-data data)
|
||||
(pcb/set-token set-name (or prev-token-name (:name token)) token)))]
|
||||
(pcb/set-token (:name token-set)
|
||||
(:name token)
|
||||
token))]
|
||||
|
||||
(rx/of
|
||||
(set-selected-token-set-name set-name)
|
||||
(when-not prev-token-name
|
||||
(ptk/event ::ev/event {::ev/name "create-tokens"}))
|
||||
(dch/commit-changes changes))))))
|
||||
(rx/of (dch/commit-changes changes)
|
||||
(ptk/data-event ::ev/event {::ev/name "create-token"})))
|
||||
|
||||
(rx/of (create-token-with-set token)))))))
|
||||
|
||||
(defn update-token
|
||||
[name params]
|
||||
(assert (string? name) "expected string for `name`")
|
||||
|
||||
(ptk/reify ::update-token
|
||||
ptk/WatchEvent
|
||||
(watch [it state _]
|
||||
(let [token-set (lookup-token-set state)
|
||||
data (dsh/lookup-file-data state)
|
||||
token (ctob/get-token token-set name)
|
||||
token' (->> (merge token params)
|
||||
(into {})
|
||||
(ctob/make-token))
|
||||
|
||||
changes (-> (pcb/empty-changes it)
|
||||
(pcb/with-library-data data)
|
||||
(pcb/set-token (:name token-set)
|
||||
(:name token)
|
||||
token'))]
|
||||
|
||||
(rx/of (dch/commit-changes changes))))))
|
||||
|
||||
(defn delete-token
|
||||
[set-name token-name]
|
||||
|
|
@ -296,21 +326,23 @@
|
|||
(ptk/reify ::duplicate-token
|
||||
ptk/WatchEvent
|
||||
(watch [_ state _]
|
||||
(let [token-set (dwts/get-selected-token-set state)
|
||||
token (some-> token-set (ctob/get-token token-name))
|
||||
tokens (some-> token-set (ctob/get-tokens))
|
||||
suffix-fn (fn [copy-count]
|
||||
(when-let [token-set (lookup-token-set state)]
|
||||
(when-let [token (ctob/get-token token-set token-name)]
|
||||
(let [tokens (ctob/get-tokens token-set)
|
||||
unames (map :name tokens)
|
||||
|
||||
suffix-fn
|
||||
(fn [copy-count]
|
||||
(let [suffix (tr "workspace.token.duplicate-suffix")]
|
||||
(str/concat "-"
|
||||
suffix
|
||||
(when (> copy-count 1)
|
||||
(str "-" copy-count)))))
|
||||
unames (map :name tokens)
|
||||
copy-name (cfh/generate-unique-name token-name unames :suffix-fn suffix-fn)]
|
||||
(when token
|
||||
(rx/of
|
||||
(update-create-token
|
||||
{:token (assoc token :name copy-name)})))))))
|
||||
|
||||
copy-name
|
||||
(cfh/generate-unique-name token-name unames :suffix-fn suffix-fn)]
|
||||
|
||||
(rx/of (create-token (assoc token :name copy-name)))))))))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; TOKEN UI OPS
|
||||
|
|
|
|||
|
|
@ -397,13 +397,20 @@
|
|||
;; The result should be a vector of all resolved validations
|
||||
;; We do not handle the error case as it will be handled by the components validations
|
||||
(when (and (seq result) (not err))
|
||||
(st/emit! (dt/update-create-token {:token (ctob/make-token :name final-name
|
||||
:type (or (:type token) token-type)
|
||||
(st/emit!
|
||||
(if (ctob/token? token)
|
||||
(dt/update-token (:name token)
|
||||
{:name final-name
|
||||
:value final-value
|
||||
:description final-description)
|
||||
:prev-token-name (:name token)}))
|
||||
(st/emit! (wtu/update-workspace-tokens))
|
||||
(modal/hide!))))))))
|
||||
:description final-description})
|
||||
|
||||
(dt/create-token {:name final-name
|
||||
:type token-type
|
||||
:value final-value
|
||||
:description final-description}))
|
||||
(wtu/update-workspace-tokens)
|
||||
(modal/hide)))))))))
|
||||
|
||||
on-delete-token
|
||||
(mf/use-fn
|
||||
(mf/deps selected-token-set-name)
|
||||
|
|
|
|||
|
|
@ -203,10 +203,11 @@
|
|||
store (ths/setup-store file)
|
||||
|
||||
;; ==== Action
|
||||
events [(dt/update-create-token {:token (ctob/make-token :name "test-token-1"
|
||||
events [(dt/set-selected-token-set-name "test-token-set")
|
||||
(dt/update-token "test-token-1"
|
||||
{:name "test-token-1"
|
||||
:type :border-radius
|
||||
:value 66)
|
||||
:prev-token-name "test-token-1"})]
|
||||
:value 66})]
|
||||
|
||||
step2 (fn [_]
|
||||
(let [events2 [(wtu/update-workspace-tokens)
|
||||
|
|
@ -358,30 +359,25 @@
|
|||
store (ths/setup-store file)
|
||||
|
||||
;; ==== Action
|
||||
events [(dt/update-create-token {:token (ctob/make-token :name "token-radius"
|
||||
:type :border-radius
|
||||
:value 30)
|
||||
:prev-token-name "token-radius"})
|
||||
(dt/update-create-token {:token (ctob/make-token :name "token-rotation"
|
||||
:type :rotation
|
||||
:value 45)
|
||||
:prev-token-name "token-rotation"})
|
||||
(dt/update-create-token {:token (ctob/make-token :name "token-opacity"
|
||||
:type :opacity
|
||||
:value 0.9)
|
||||
:prev-token-name "token-opacity"})
|
||||
(dt/update-create-token {:token (ctob/make-token :name "token-stroke-width"
|
||||
:type :stroke-width
|
||||
:value 8)
|
||||
:prev-token-name "token-stroke-width"})
|
||||
(dt/update-create-token {:token (ctob/make-token :name "token-color"
|
||||
:type :color
|
||||
:value "#ff0000")
|
||||
:prev-token-name "token-color"})
|
||||
(dt/update-create-token {:token (ctob/make-token :name "token-dimensions"
|
||||
:type :dimensions
|
||||
:value 200)
|
||||
:prev-token-name "token-dimensions"})]
|
||||
events [(dt/set-selected-token-set-name "test-token-set")
|
||||
(dt/update-token "token-radius"
|
||||
{:name "token-radius"
|
||||
:value 30})
|
||||
(dt/update-token "token-rotation"
|
||||
{:name "token-rotation"
|
||||
:value 45})
|
||||
(dt/update-token "token-opacity"
|
||||
{:name "token-opacity"
|
||||
:value 0.9})
|
||||
(dt/update-token "token-stroke-width"
|
||||
{:name "token-stroke-width"
|
||||
:value 8})
|
||||
(dt/update-token "token-color"
|
||||
{:name "token-color"
|
||||
:value "#ff0000"})
|
||||
(dt/update-token "token-dimensions"
|
||||
{:name "token-dimensions"
|
||||
:value 200})]
|
||||
|
||||
step2 (fn [_]
|
||||
(let [events2 [(wtu/update-workspace-tokens)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue