From f5249196f994241dd3ec47c3e868ad44532bba1b Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Fri, 20 Sep 2024 14:27:19 +0200 Subject: [PATCH] Sets sidebar --- .../options/menus/layout_container.cljs | 2 +- .../sidebar/options/menus/measures.cljs | 2 +- .../app/main/ui/workspace/tokens/core.cljs | 10 +++- .../app/main/ui/workspace/tokens/sets.cljs | 2 +- .../app/main/ui/workspace/tokens/sidebar.cljs | 1 - .../ui/workspace/tokens/style_dictionary.cljs | 60 ++++++++++--------- .../app/main/ui/workspace/tokens/token.cljs | 36 ++++++++--- .../main/ui/workspace/tokens/token_set.cljs | 42 ++++++++----- 8 files changed, 96 insertions(+), 59 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs index ef32a4e67..b758051d5 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs @@ -857,7 +857,7 @@ shape (when-not multiple (first (deref (refs/objects-by-id ids)))) tokens (mf/deref refs/workspace-selected-token-set-tokens) - spacing-tokens (mf/use-memo (mf/deps tokens) #(:spacing (wtc/group-tokens-by-type tokens))) + spacing-tokens (mf/use-memo (mf/deps tokens) #(:spacing (wtc/group-tokens-by-type-OLD tokens))) spacing-column-options (mf/use-memo (mf/deps shape spacing-tokens) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs index 2f9dd5a3a..b1fdb562f 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs @@ -103,7 +103,7 @@ tokens (-> (mf/deref refs/workspace-active-theme-sets-tokens) (sd/use-resolved-tokens)) - tokens-by-type (mf/use-memo (mf/deps tokens) #(wtc/group-tokens-by-type tokens)) + tokens-by-type (mf/use-memo (mf/deps tokens) #(wtc/group-tokens-by-type-OLD tokens)) border-radius-tokens (:border-radius tokens-by-type) border-radius-options (mf/use-memo diff --git a/frontend/src/app/main/ui/workspace/tokens/core.cljs b/frontend/src/app/main/ui/workspace/tokens/core.cljs index 489d3f041..117e7b3df 100644 --- a/frontend/src/app/main/ui/workspace/tokens/core.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/core.cljs @@ -11,7 +11,8 @@ [app.main.ui.workspace.tokens.token :as wtt] [app.util.dom :as dom] [app.util.webapi :as wapi] - [cuerdas.core :as str])) + [cuerdas.core :as str] + [app.common.data.macros :as dm])) ;; Helpers --------------------------------------------------------------------- @@ -29,6 +30,13 @@ (->> (vals tokens) (group-by :type))) +(dm/legacy + (defn group-tokens-by-type-OLD + "Groups tokens by their `:type` property." + [tokens] + (->> (vals tokens) + (group-by :type)))) + (defn tokens-name-map->select-options [{:keys [shape tokens attributes selected-attributes]}] (->> (wtt/token-names-map tokens) (map (fn [[_k {:keys [name] :as item}]] diff --git a/frontend/src/app/main/ui/workspace/tokens/sets.cljs b/frontend/src/app/main/ui/workspace/tokens/sets.cljs index 11db39e78..c4f95f992 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sets.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sets.cljs @@ -72,7 +72,7 @@ on-cancel] :as _props}] (let [{:keys [id name _children]} token-set - selected? (and set? (token-set-selected? id)) + selected? (and set? (token-set-selected? name)) visible? (token-set-active? id) collapsed? (mf/use-state false) set? true #_(= type :set) diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs index 8e8a371a0..64ebfb449 100644 --- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs @@ -241,7 +241,6 @@ selected (mf/deref refs/selected-shapes) selected-shapes (into [] (keep (d/getf objects)) selected) - active-theme-tokens (sd/use-active-theme-sets-tokens) tokens (sd/use-resolved-workspace-tokens) diff --git a/frontend/src/app/main/ui/workspace/tokens/style_dictionary.cljs b/frontend/src/app/main/ui/workspace/tokens/style_dictionary.cljs index 72e133730..7c6f73200 100644 --- a/frontend/src/app/main/ui/workspace/tokens/style_dictionary.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/style_dictionary.cljs @@ -72,34 +72,34 @@ (defn resolve-tokens+ [tokens & {:keys [names-map?] :as config}] - (p/let [sd-tokens (-> (wtt/token-names-tree tokens) - (resolve-sd-tokens+))] - (let [resolved-tokens (reduce - (fn [acc ^js cur] - (let [identifier (if names-map? - (.. cur -original -name) - (uuid (.-uuid (.-id cur)))) - {:keys [type] :as origin-token} (get tokens identifier) - value (.-value cur) - token-or-err (case type - :color (if-let [tc (tinycolor/valid-color value)] - {:value value :unit (tinycolor/color-format tc)} - {:errors [(wte/error-with-value :error.token/invalid-color value)]}) - (or (wtt/parse-token-value value) - (if-let [references (-> (wtt/find-token-references value) - (seq))] - {:errors [(wte/error-with-value :error.style-dictionary/missing-reference references)] - :references references} - {:errors [(wte/error-with-value :error.style-dictionary/invalid-token-value value)]}))) - output-token (if (:errors token-or-err) - (merge origin-token token-or-err) - (assoc origin-token - :resolved-value (:value token-or-err) - :unit (:unit token-or-err)))] - (assoc acc (wtt/token-identifier output-token) output-token))) - {} sd-tokens)] - (l/debug :hint "Resolved tokens" :js/tokens resolved-tokens) - resolved-tokens))) + (let [{:keys [tree ids-map]} (wtt/token-names-tree-id-map tokens)] + (p/let [sd-tokens (resolve-sd-tokens+ tree)] + (let [resolved-tokens (reduce + (fn [acc ^js cur] + (let [identifier (if names-map? + (.. cur -original -name) + (uuid (.-uuid (.-id cur)))) + {:keys [type] :as origin-token} (get ids-map identifier) + value (.-value cur) + token-or-err (case type + :color (if-let [tc (tinycolor/valid-color value)] + {:value value :unit (tinycolor/color-format tc)} + {:errors [(wte/error-with-value :error.token/invalid-color value)]}) + (or (wtt/parse-token-value value) + (if-let [references (-> (wtt/find-token-references value) + (seq))] + {:errors [(wte/error-with-value :error.style-dictionary/missing-reference references)] + :references references} + {:errors [(wte/error-with-value :error.style-dictionary/invalid-token-value value)]}))) + output-token (if (:errors token-or-err) + (merge origin-token token-or-err) + (assoc origin-token + :resolved-value (:value token-or-err) + :unit (:unit token-or-err)))] + (assoc acc (wtt/token-identifier output-token) output-token))) + {} sd-tokens)] + (l/debug :hint "Resolved tokens" :js/tokens resolved-tokens) + resolved-tokens)))) ;; Hooks ----------------------------------------------------------------------- @@ -125,7 +125,9 @@ (let [cached (get @cache-atom tokens)] (cond ;; The tokens are already processing somewhere - (p/promise? cached) (p/then cached #(reset! tokens-state %)) + (p/promise? cached) (-> cached + (p/then #(reset! tokens-state %)) + #_(p/catch js/console.error)) ;; Get the cached entry (some? cached) (reset! tokens-state cached) ;; No cached entry, start processing diff --git a/frontend/src/app/main/ui/workspace/tokens/token.cljs b/frontend/src/app/main/ui/workspace/tokens/token.cljs index 5f1a95766..9c097b180 100644 --- a/frontend/src/app/main/ui/workspace/tokens/token.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/token.cljs @@ -1,9 +1,10 @@ (ns app.main.ui.workspace.tokens.token (:require [app.common.data :as d] + [app.common.data.macros :as dm] + [app.main.ui.workspace.tokens.tinycolor :as tinycolor] [clojure.set :as set] - [cuerdas.core :as str] - [app.main.ui.workspace.tokens.tinycolor :as tinycolor])) + [cuerdas.core :as str])) (defn get-workspace-tokens [state] @@ -117,15 +118,32 @@ (->> (map (fn [{:keys [name] :as token}] [name token]) tokens) (into {}))) -(defn token-names-tree - "Convert tokens into a nested tree with their `:name` as the path." - [tokens] +(defonce a (atom nil)) + +(defn token-names-tree-id-map [tokens] + (reset! a tokens) (reduce - (fn [acc [_ {:keys [name] :as token}]] + (fn [acc {:keys [name] :as token}] (when (string? name) - (let [path (token-name->path name)] - (assoc-in acc path token)))) - {} tokens)) + (let [temp-id (random-uuid) + token (assoc token :temp/id temp-id)] + (-> acc + (assoc-in (concat [:tree] (token-name->path name)) token) + (assoc-in [:ids-map temp-id] token))))) + {:tree {} + :ids-map {}} + tokens)) + +(dm/legacy + (defn token-names-tree + "Convert tokens into a nested tree with their `:name` as the path." + [tokens] + (reduce + (fn [acc [_ {:keys [name] :as token}]] + (when (string? name) + (let [path (token-name->path name)] + (assoc-in acc path token)))) + {} tokens))) (defn token-name-path-exists? "Traverses the path from `token-name` down a `token-tree` and checks if a token at that path exists. diff --git a/frontend/src/app/main/ui/workspace/tokens/token_set.cljs b/frontend/src/app/main/ui/workspace/tokens/token_set.cljs index b7b06e59e..237b778cd 100644 --- a/frontend/src/app/main/ui/workspace/tokens/token_set.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/token_set.cljs @@ -2,7 +2,11 @@ (:require [app.common.data :refer [ordered-map]] [app.main.ui.workspace.tokens.token :as wtt] - [clojure.set :as set])) + [clojure.set :as set] + [app.common.types.tokens-lib :as ctob])) + +(defn get-workspace-tokens-lib [state] + (get-in state [:workspace-data :tokens-lib])) ;; Themes ---------------------------------------------------------------------- @@ -146,21 +150,6 @@ (-> (get-token-set set-id state) :tokens)) -(defn get-selected-token-set-id [state] - (or (get-in state [:workspace-local :selected-token-set-id]) - (get-in state [:workspace-data :token-set-groups 0]))) - -(defn get-selected-token-set [state] - (when-let [id (get-selected-token-set-id state)] - (get-token-set id state))) - -(defn get-selected-token-set-tokens [state] - (when-let [token-set (get-selected-token-set state)] - (let [tokens (or (wtt/get-workspace-tokens state) {})] - (select-keys tokens (:tokens token-set))))) - -(defn assoc-selected-token-set-id [state id] - (assoc-in state [:workspace-local :selected-token-set-id] id)) (defn get-active-theme-sets-tokens-names-map [state] (let [active-set-ids (get-ordered-active-set-ids state)] @@ -174,3 +163,24 @@ acc)) names-map-acc token-ids))) (ordered-map) active-set-ids))) + +;; === Set selection + +(defn get-selected-token-set-id [state] + (or (get-in state [:workspace-local :selected-token-set-id]) + (some-> (get-workspace-tokens-lib state) + (ctob/get-sets) + (first) + (:name)))) + +(defn get-selected-token-set [state] + (when-let [id (get-selected-token-set-id state)] + (some-> (get-workspace-tokens-lib state) + (ctob/get-set id)))) + +(defn get-selected-token-set-tokens [state] + (some-> (get-selected-token-set state) + (ctob/get-tokens))) + +(defn assoc-selected-token-set-id [state id] + (assoc-in state [:workspace-local :selected-token-set-id] id))