3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-17 17:16:09 +02:00
Code Issues Projects Releases Packages Wiki Activity

⚡ Add performance oriented refactor to token sidebar and token-pill

Browse source
This commit is contained in:
Andrey Antukh 2025-02-05 15:52:28 +01:00
parent 81036b9330
commit 8e85d5a02a
2 changed files with 55 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

36
frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
View file

@ -33,7 +33,6 @@
[app.main.ui.workspace.tokens.sets-context-menu :refer [sets-context-menu]]
[app.main.ui.workspace.tokens.style-dictionary :as sd]
[app.main.ui.workspace.tokens.theme-select :refer [theme-select]]
[app.main.ui.workspace.tokens.token :as wtt]
[app.main.ui.workspace.tokens.token-pill :refer [token-pill*]]
[app.util.array :as array]
[app.util.dom :as dom]
@ -66,19 +65,10 @@
:sizing "expand"
"add"))
(def ^:private
xf:map-id
(map :id))
(defn- all-selected? [token selected-shapes attributes]
(let [ids-by-attributes (wtt/shapes-ids-by-applied-attributes token selected-shapes attributes)
shape-ids (into #{} xf:map-id selected-shapes)]
(wtt/shapes-applied-all? ids-by-attributes shape-ids attributes)))
(mf/defc token-group*
{::mf/private true}
[{:keys [type tokens selected-shapes active-theme-tokens is-open]}]
(let [{:keys [modal attributes all-attributes title] :as token-type-props}
(let [{:keys [modal title]}
(get wtch/token-properties type)
tokens
@ -144,23 +134,13 @@
[:& cmm/asset-section-block {:role :content}
[:div {:class (stl/css :token-pills-wrapper)}
(for [token tokens]
(let [theme-token (get active-theme-tokens (:name token))
multiple-selection (< 1 (count selected-shapes))
full-applied (all-selected? token selected-shapes (or all-attributes attributes))
applied (wtt/shapes-token-applied? token selected-shapes (or all-attributes attributes))]
[:> token-pill*
{:key (:name token)
:token (d/nilv theme-token token)
:selected-shapes selected-shapes
:active-theme-tokens active-theme-tokens
:half-applied (or (and applied multiple-selection)
(and applied (not full-applied)))
:full-applied (if multiple-selection
false
applied)
:on-click on-token-pill-click
:on-context-menu on-context-menu}]))]])]]))
[:> token-pill*
{:key (:name token)
:token token
:selected-shapes selected-shapes
:active-theme-tokens active-theme-tokens
:on-click on-token-pill-click
:on-context-menu on-context-menu}])]])]]))
(defn- get-sorted-token-groups
"Separate token-types into groups of `empty` or `filled` depending if

62
frontend/src/app/main/ui/workspace/tokens/token_pill.cljs
View file

@ -141,17 +141,49 @@
(let [match (second (re-find #"\{([^}]+)\}" text))]
(contains? active-tokens match)))
(def ^:private
xf:map-id
(map :id))
(defn- applied-all-attributes?
[token selected-shapes attributes]
(let [ids-by-attributes (wtt/shapes-ids-by-applied-attributes token selected-shapes attributes)
shape-ids (into #{} xf:map-id selected-shapes)]
(wtt/shapes-applied-all? ids-by-attributes shape-ids attributes)))
(mf/defc token-pill*
[{:keys [on-click token full-applied on-context-menu half-applied selected-shapes active-theme-tokens]}]
{::mf/wrap [mf/memo]}
[{:keys [on-click token on-context-menu selected-shapes active-theme-tokens]}]
(let [{:keys [name value errors]} token
token
(or (get active-theme-tokens (:name token)) token)
has-selected? (pos? (count selected-shapes))
is-reference? (wtt/is-reference? token)
contains-path? (str/includes? name ".")
{:keys [attributes all-attributes]}
(get wtch/token-properties (:type token))
full-applied?
(if has-selected?
(applied-all-attributes? token selected-shapes (or all-attributes attributes))
true)
applied?
(if has-selected?
(wtt/shapes-token-applied? token selected-shapes (or all-attributes attributes))
false)
half-applied?
(and applied? (not full-applied?))
;; FIXME: move to context or props
can-edit? (:can-edit (deref refs/permissions))
is-viewer (not can-edit?)
is-viewer? (not can-edit?)
ref-not-in-active-set
(and is-reference?
@ -174,9 +206,9 @@
token-status-id
(cond
half-applied
half-applied?
"token-status-partial"
full-applied
full-applied?
"token-status-full"
:else
"token-status-non-applied")
@ -200,26 +232,26 @@
;; FIXME: missing deps
on-hover
(mf/use-fn
(mf/deps selected-shapes is-viewer)
(mf/deps selected-shapes is-viewer?)
(fn [event]
(let [node (dom/get-current-target event)
title (generate-tooltip is-viewer (first selected-shapes) token
half-applied no-valid-value ref-not-in-active-set)]
title (generate-tooltip is-viewer? (first selected-shapes) token
half-applied? no-valid-value ref-not-in-active-set)]
(dom/set-attribute! node "title" title))))]
[:button {:class (stl/css-case
:token-pill true
:token-pill-default can-edit?
:token-pill-applied (and can-edit? (or half-applied full-applied))
:token-pill-applied (and can-edit? has-selected? (or half-applied? full-applied?))
:token-pill-invalid (and can-edit? errors?)
:token-pill-invalid-applied (and full-applied errors? can-edit?)
:token-pill-viewer is-viewer
:token-pill-applied-viewer (and is-viewer
(or half-applied full-applied))
:token-pill-invalid-viewer (and is-viewer
:token-pill-invalid-applied (and full-applied? errors? can-edit?)
:token-pill-viewer is-viewer?
:token-pill-applied-viewer (and is-viewer? has-selected?
(or half-applied? full-applied?))
:token-pill-invalid-viewer (and is-viewer?
errors?)
:token-pill-invalid-applied-viewer (and is-viewer
(and full-applied errors?)))
:token-pill-invalid-applied-viewer (and is-viewer?
(and full-applied? errors?)))
:type "button"
:on-click on-click
:on-mouse-enter on-hover