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

🔧 Move token application to workspace.data

Browse source
This commit is contained in:
Andrés Moya 2025-04-25 11:53:36 +02:00 • committed by Andrés Moya
parent 916eb530a0
commit 213c04bc8a
8 changed files with 116 additions and 114 deletions
Download patch file Download diff file Expand all files Collapse all files

10
frontend/src/app/main/ui/workspace/tokens/changes.cljs → frontend/src/app/main/data/workspace/tokens/application.cljs
View file

@ -4,7 +4,7 @@
;; ;;
;; Copyright (c) KALEIDOS INC ;; Copyright (c) KALEIDOS INC
(ns app.main.ui.workspace.tokens.changes (ns app.main.data.workspace.tokens.application
(:require (:require
[app.common.data :as d] [app.common.data :as d]
[app.common.data.macros :as dm] [app.common.data.macros :as dm]
@ -30,7 +30,7 @@
(declare token-properties) (declare token-properties)
;; Token Updates --------------------------------------------------------------- ;; Events to apply / unapply tokens to shapes ------------------------------------------------------------
(defn apply-token (defn apply-token
"Apply `attributes` that match `token` for `shape-ids`. "Apply `attributes` that match `token` for `shape-ids`.
@ -109,7 +109,9 @@
:shape-ids shape-ids :shape-ids shape-ids
:on-update-shape on-update-shape}))))))) :on-update-shape on-update-shape})))))))
;; Shape Updates --------------------------------------------------------------- ;; Events to update the value of attributes with applied tokens ---------------------------------------------------------
;; (note that dwsh/update-shapes function returns an event)
(defn update-shape-radius-all (defn update-shape-radius-all
([value shape-ids attributes] (update-shape-radius-all value shape-ids attributes nil)) ([value shape-ids attributes] (update-shape-radius-all value shape-ids attributes nil))
@ -326,7 +328,7 @@
(dwsl/update-layout-child shape-ids props {:ignore-touched true (dwsl/update-layout-child shape-ids props {:ignore-touched true
:page-id page-id})))))))) :page-id page-id}))))))))
;; Token Types ----------------------------------------------------------------- ;; Map token types to different properties used along the cokde ---------------------------------------------------------
;; FIXME: the values should be lazy evaluated, probably a function, ;; FIXME: the values should be lazy evaluated, probably a function,
;; becasue on future we will need to translate that labels and that ;; becasue on future we will need to translate that labels and that

68
frontend/src/app/main/ui/workspace/tokens/context_menu.cljs
View file

@ -13,11 +13,11 @@
[app.main.data.modal :as modal] [app.main.data.modal :as modal]
[app.main.data.tokens :as dt] [app.main.data.tokens :as dt]
[app.main.data.workspace.shape-layout :as dwsl] [app.main.data.workspace.shape-layout :as dwsl]
[app.main.data.workspace.tokens.application :as dwta]
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.components.dropdown :refer [dropdown]] [app.main.ui.components.dropdown :refer [dropdown]]
[app.main.ui.ds.foundations.assets.icon :refer [icon*]] [app.main.ui.ds.foundations.assets.icon :refer [icon*]]
[app.main.ui.workspace.tokens.changes :as wtch]
[app.main.ui.workspace.tokens.token :as wtt] [app.main.ui.workspace.tokens.token :as wtt]
[app.util.dom :as dom] [app.util.dom :as dom]
[app.util.i18n :refer [tr]] [app.util.i18n :refer [tr]]
@ -38,7 +38,7 @@
(defn generic-attribute-actions [attributes title {:keys [token selected-shapes on-update-shape hint]}] (defn generic-attribute-actions [attributes title {:keys [token selected-shapes on-update-shape hint]}]
(let [on-update-shape-fn (or on-update-shape (let [on-update-shape-fn (or on-update-shape
(-> (wtch/get-token-properties token) (-> (dwta/get-token-properties token)
(:on-update-shape))) (:on-update-shape)))
{:keys [selected-pred shape-ids]} (attribute-actions token selected-shapes attributes)] {:keys [selected-pred shape-ids]} (attribute-actions token selected-shapes attributes)]
(map (fn [attribute] (map (fn [attribute]
@ -52,8 +52,8 @@
:selected? selected? :selected? selected?
:action (fn [] :action (fn []
(if selected? (if selected?
(st/emit! (wtch/unapply-token props)) (st/emit! (dwta/unapply-token props))
(st/emit! (wtch/apply-token (assoc props :on-update-shape on-update-shape-fn)))))})) (st/emit! (dwta/apply-token (assoc props :on-update-shape on-update-shape-fn)))))}))
attributes))) attributes)))
(defn all-or-separate-actions [{:keys [attribute-labels on-update-shape-all on-update-shape hint]} (defn all-or-separate-actions [{:keys [attribute-labels on-update-shape-all on-update-shape hint]}
@ -67,8 +67,8 @@
:selected? all-selected? :selected? all-selected?
:hint hint :hint hint
:action #(if all-selected? :action #(if all-selected?
(st/emit! (wtch/unapply-token props)) (st/emit! (dwta/unapply-token props))
(st/emit! (wtch/apply-token (assoc props :on-update-shape (or on-update-shape-all on-update-shape)))))}) (st/emit! (dwta/apply-token (assoc props :on-update-shape (or on-update-shape-all on-update-shape)))))})
single-actions (map (fn [[attr title]] single-actions (map (fn [[attr title]]
(let [selected? (selected-pred attr)] (let [selected? (selected-pred attr)]
{:title title {:title title
@ -78,10 +78,10 @@
:shape-ids shape-ids} :shape-ids shape-ids}
event (cond event (cond
all-selected? (-> (assoc props :attributes-to-remove attributes) all-selected? (-> (assoc props :attributes-to-remove attributes)
(wtch/apply-token)) (dwta/apply-token))
selected? (wtch/unapply-token props) selected? (dwta/unapply-token props)
:else (-> (assoc props :on-update-shape on-update-shape) :else (-> (assoc props :on-update-shape on-update-shape)
(wtch/apply-token)))] (dwta/apply-token)))]
(st/emit! event))})) (st/emit! event))}))
attribute-labels)] attribute-labels)]
(concat [all-action] single-actions))) (concat [all-action] single-actions)))
@ -105,17 +105,17 @@
:token token :token token
:shape-ids shape-ids}] :shape-ids shape-ids}]
(if all-selected? (if all-selected?
(st/emit! (wtch/unapply-token props)) (st/emit! (dwta/unapply-token props))
(st/emit! (wtch/apply-token (assoc props :on-update-shape on-update-shape))))))} (st/emit! (dwta/apply-token (assoc props :on-update-shape on-update-shape))))))}
{:title "Horizontal" {:title "Horizontal"
:selected? horizontal-selected? :selected? horizontal-selected?
:action (fn [] :action (fn []
(let [props {:token token (let [props {:token token
:shape-ids shape-ids} :shape-ids shape-ids}
event (cond event (cond
all-selected? (wtch/apply-token (assoc props :attributes-to-remove vertical-attrs)) all-selected? (dwta/apply-token (assoc props :attributes-to-remove vertical-attrs))
horizontal-selected? (wtch/apply-token (assoc props :attributes-to-remove horizontal-attrs)) horizontal-selected? (dwta/apply-token (assoc props :attributes-to-remove horizontal-attrs))
:else (wtch/apply-token (assoc props :else (dwta/apply-token (assoc props
:attributes horizontal-attrs :attributes horizontal-attrs
:on-update-shape on-update-shape)))] :on-update-shape on-update-shape)))]
(st/emit! event)))} (st/emit! event)))}
@ -125,9 +125,9 @@
(let [props {:token token (let [props {:token token
:shape-ids shape-ids} :shape-ids shape-ids}
event (cond event (cond
all-selected? (wtch/apply-token (assoc props :attributes-to-remove horizontal-attrs)) all-selected? (dwta/apply-token (assoc props :attributes-to-remove horizontal-attrs))
vertical-selected? (wtch/apply-token (assoc props :attributes-to-remove vertical-attrs)) vertical-selected? (dwta/apply-token (assoc props :attributes-to-remove vertical-attrs))
:else (wtch/apply-token (assoc props :else (dwta/apply-token (assoc props
:attributes vertical-attrs :attributes vertical-attrs
:on-update-shape on-update-shape)))] :on-update-shape on-update-shape)))]
(st/emit! event)))}] (st/emit! event)))}]
@ -147,10 +147,10 @@
:shape-ids shape-ids} :shape-ids shape-ids}
event (cond event (cond
all-selected? (-> (assoc props :attributes-to-remove attrs) all-selected? (-> (assoc props :attributes-to-remove attrs)
(wtch/apply-token)) (dwta/apply-token))
selected? (wtch/unapply-token props) selected? (dwta/unapply-token props)
:else (-> (assoc props :on-update-shape on-update-shape) :else (-> (assoc props :on-update-shape on-update-shape)
(wtch/apply-token)))] (dwta/apply-token)))]
(st/emit! event))})) (st/emit! event))}))
all-attr-labels)] all-attr-labels)]
(concat multi-items single-items))) (concat multi-items single-items)))
@ -159,13 +159,13 @@
(st/emit! (st/emit!
(when (= (count attributes) 1) (when (= (count attributes) 1)
(dwsl/update-layout shape-ids {:layout-padding-type :multiple})) (dwsl/update-layout shape-ids {:layout-padding-type :multiple}))
(wtch/update-layout-padding value shape-ids attributes))) (dwta/update-layout-padding value shape-ids attributes)))
(defn update-shape-layout-margin [value shape-ids attributes] (defn update-shape-layout-margin [value shape-ids attributes]
(st/emit! (st/emit!
(when (= (count attributes) 1) (when (= (count attributes) 1)
(dwsl/update-layout shape-ids {:layout-item-margin-type :multiple})) (dwsl/update-layout shape-ids {:layout-item-margin-type :multiple}))
(wtch/update-layout-item-margin value shape-ids attributes))) (dwta/update-layout-item-margin value shape-ids attributes)))
(defn spacing-attribute-actions [{:keys [token selected-shapes] :as context-data}] (defn spacing-attribute-actions [{:keys [token selected-shapes] :as context-data}]
(let [padding-items (layout-spacing-items {:token token (let [padding-items (layout-spacing-items {:token token
@ -195,7 +195,7 @@
gap-items (all-or-separate-actions {:attribute-labels {:column-gap "Column Gap" gap-items (all-or-separate-actions {:attribute-labels {:column-gap "Column Gap"
:row-gap "Row Gap"} :row-gap "Row Gap"}
:hint (tr "workspace.token.gaps") :hint (tr "workspace.token.gaps")
:on-update-shape wtch/update-layout-spacing} :on-update-shape dwta/update-layout-spacing}
context-data)] context-data)]
(concat gap-items (concat gap-items
[:separator] [:separator]
@ -208,25 +208,25 @@
(all-or-separate-actions {:attribute-labels {:width "Width" (all-or-separate-actions {:attribute-labels {:width "Width"
:height "Height"} :height "Height"}
:hint (tr "workspace.token.size") :hint (tr "workspace.token.size")
:on-update-shape wtch/update-shape-dimensions} :on-update-shape dwta/update-shape-dimensions}
context-data) context-data)
[:separator] [:separator]
(all-or-separate-actions {:attribute-labels {:layout-item-min-w "Min Width" (all-or-separate-actions {:attribute-labels {:layout-item-min-w "Min Width"
:layout-item-min-h "Min Height"} :layout-item-min-h "Min Height"}
:hint (tr "workspace.token.min-size") :hint (tr "workspace.token.min-size")
:on-update-shape wtch/update-layout-sizing-limits} :on-update-shape dwta/update-layout-sizing-limits}
context-data) context-data)
[:separator] [:separator]
(all-or-separate-actions {:attribute-labels {:layout-item-max-w "Max Width" (all-or-separate-actions {:attribute-labels {:layout-item-max-w "Max Width"
:layout-item-max-h "Max Height"} :layout-item-max-h "Max Height"}
:hint (tr "workspace.token.max-size") :hint (tr "workspace.token.max-size")
:on-update-shape wtch/update-layout-sizing-limits} :on-update-shape dwta/update-layout-sizing-limits}
context-data))) context-data)))
(defn update-shape-radius-for-corners [value shape-ids attributes] (defn update-shape-radius-for-corners [value shape-ids attributes]
(st/emit! (st/emit!
(ptk/data-event :expand-border-radius) (ptk/data-event :expand-border-radius)
(wtch/update-shape-radius-for-corners value shape-ids attributes))) (dwta/update-shape-radius-for-corners value shape-ids attributes)))
(def shape-attribute-actions-map (def shape-attribute-actions-map
(let [stroke-width (partial generic-attribute-actions #{:stroke-width} "Stroke Width")] (let [stroke-width (partial generic-attribute-actions #{:stroke-width} "Stroke Width")]
@ -235,11 +235,11 @@
:r4 "Bottom Left" :r4 "Bottom Left"
:r3 "Bottom Right"} :r3 "Bottom Right"}
:hint (tr "workspace.token.radius") :hint (tr "workspace.token.radius")
:on-update-shape-all wtch/update-shape-radius-all :on-update-shape-all dwta/update-shape-radius-all
:on-update-shape update-shape-radius-for-corners}) :on-update-shape update-shape-radius-for-corners})
:color (fn [context-data] :color (fn [context-data]
[(generic-attribute-actions #{:fill} "Fill" (assoc context-data :on-update-shape wtch/update-fill :hint (tr "workspace.token.color"))) [(generic-attribute-actions #{:fill} "Fill" (assoc context-data :on-update-shape dwta/update-fill :hint (tr "workspace.token.color")))
(generic-attribute-actions #{:stroke-color} "Stroke" (assoc context-data :on-update-shape wtch/update-stroke-color))]) (generic-attribute-actions #{:stroke-color} "Stroke" (assoc context-data :on-update-shape dwta/update-stroke-color))])
:spacing spacing-attribute-actions :spacing spacing-attribute-actions
:sizing sizing-attribute-actions :sizing sizing-attribute-actions
:rotation (partial generic-attribute-actions #{:rotation} "Rotation") :rotation (partial generic-attribute-actions #{:rotation} "Rotation")
@ -252,13 +252,13 @@
:separator :separator
{:title "Border Radius" :submenu :border-radius}] {:title "Border Radius" :submenu :border-radius}]
[:separator] [:separator]
(stroke-width (assoc context-data :on-update-shape wtch/update-stroke-width)) (stroke-width (assoc context-data :on-update-shape dwta/update-stroke-width))
[:separator] [:separator]
(generic-attribute-actions #{:x} "X" (assoc context-data :on-update-shape wtch/update-shape-position :hint (tr "workspace.token.axis"))) (generic-attribute-actions #{:x} "X" (assoc context-data :on-update-shape dwta/update-shape-position :hint (tr "workspace.token.axis")))
(generic-attribute-actions #{:y} "Y" (assoc context-data :on-update-shape wtch/update-shape-position))))})) (generic-attribute-actions #{:y} "Y" (assoc context-data :on-update-shape dwta/update-shape-position))))}))
(defn default-actions [{:keys [token selected-token-set-name]}] (defn default-actions [{:keys [token selected-token-set-name]}]
(let [{:keys [modal]} (wtch/get-token-properties token)] (let [{:keys [modal]} (dwta/get-token-properties token)]
[{:title (tr "workspace.token.edit") [{:title (tr "workspace.token.edit")
:no-selectable true :no-selectable true
:action (fn [event] :action (fn [event]

4
frontend/src/app/main/ui/workspace/tokens/form.cljs
View file

@ -13,6 +13,7 @@
[app.common.types.tokens-lib :as ctob] [app.common.types.tokens-lib :as ctob]
[app.main.data.modal :as modal] [app.main.data.modal :as modal]
[app.main.data.tokens :as dt] [app.main.data.tokens :as dt]
[app.main.data.workspace.tokens.application :as dwta]
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.ds.buttons.button :refer [button*]] [app.main.ui.ds.buttons.button :refer [button*]]
@ -22,7 +23,6 @@
[app.main.ui.ds.notifications.context-notification :refer [context-notification*]] [app.main.ui.ds.notifications.context-notification :refer [context-notification*]]
[app.main.ui.workspace.colorpicker :as colorpicker] [app.main.ui.workspace.colorpicker :as colorpicker]
[app.main.ui.workspace.colorpicker.ramp :refer [ramp-selector*]] [app.main.ui.workspace.colorpicker.ramp :refer [ramp-selector*]]
[app.main.ui.workspace.tokens.changes :as wtch]
[app.main.ui.workspace.tokens.components.controls.input-token-color-bullet :refer [input-token-color-bullet*]] [app.main.ui.workspace.tokens.components.controls.input-token-color-bullet :refer [input-token-color-bullet*]]
[app.main.ui.workspace.tokens.components.controls.input-tokens :refer [input-tokens*]] [app.main.ui.workspace.tokens.components.controls.input-tokens :refer [input-tokens*]]
[app.main.ui.workspace.tokens.errors :as wte] [app.main.ui.workspace.tokens.errors :as wte]
@ -239,7 +239,7 @@
[{:keys [token token-type action selected-token-set-name on-display-colorpicker]}] [{:keys [token token-type action selected-token-set-name on-display-colorpicker]}]
(let [create? (not (instance? ctob/Token token)) (let [create? (not (instance? ctob/Token token))
token (or token {:type token-type}) token (or token {:type token-type})
token-properties (wtch/get-token-properties token) token-properties (dwta/get-token-properties token)
color? (wtt/color-token? token) color? (wtt/color-token? token)
selected-set-tokens (mf/deref refs/workspace-selected-token-set-tokens) selected-set-tokens (mf/deref refs/workspace-selected-token-set-tokens)

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

@ -14,6 +14,7 @@
[app.main.data.modal :as modal] [app.main.data.modal :as modal]
[app.main.data.notifications :as ntf] [app.main.data.notifications :as ntf]
[app.main.data.tokens :as dt] [app.main.data.tokens :as dt]
[app.main.data.workspace.tokens.application :as dwta]
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.components.dropdown-menu :refer [dropdown-menu dropdown-menu-item*]] [app.main.ui.components.dropdown-menu :refer [dropdown-menu dropdown-menu-item*]]
@ -26,7 +27,6 @@
[app.main.ui.hooks :as h] [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.workspace.sidebar.assets.common :as cmm] [app.main.ui.workspace.sidebar.assets.common :as cmm]
[app.main.ui.workspace.tokens.changes :as wtch]
[app.main.ui.workspace.tokens.context-menu :refer [token-context-menu]] [app.main.ui.workspace.tokens.context-menu :refer [token-context-menu]]
[app.main.ui.workspace.tokens.errors :as wte] [app.main.ui.workspace.tokens.errors :as wte]
[app.main.ui.workspace.tokens.sets :as tsets] [app.main.ui.workspace.tokens.sets :as tsets]
@ -70,7 +70,7 @@
{::mf/private true} {::mf/private true}
[{:keys [type tokens selected-shapes active-theme-tokens is-open]}] [{:keys [type tokens selected-shapes active-theme-tokens is-open]}]
(let [{:keys [modal title]} (let [{:keys [modal title]}
(get wtch/token-properties type) (get dwta/token-properties type)
can-edit? can-edit?
(mf/use-ctx ctx/can-edit?) (mf/use-ctx ctx/can-edit?)
@ -116,7 +116,7 @@
(fn [event token] (fn [event token]
(dom/stop-propagation event) (dom/stop-propagation event)
(when (seq selected-shapes) (when (seq selected-shapes)
(st/emit! (wtch/toggle-token {:token token (st/emit! (dwta/toggle-token {:token token
:shapes selected-shapes})))))] :shapes selected-shapes})))))]
[:div {:on-click on-toggle-open-click :class (stl/css :token-section-wrapper)} [:div {:on-click on-toggle-open-click :class (stl/css :token-section-wrapper)}
@ -151,7 +151,7 @@
[tokens-by-type] [tokens-by-type]
(loop [empty #js [] (loop [empty #js []
filled #js [] filled #js []
types (-> wtch/token-properties keys seq)] types (-> dwta/token-properties keys seq)]
(if-let [type (first types)] (if-let [type (first types)]
(if (not-empty (get tokens-by-type type)) (if (not-empty (get tokens-by-type type))
(recur empty (recur empty

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

@ -11,11 +11,11 @@
(:require (:require
[app.common.data :as d] [app.common.data :as d]
[app.common.files.helpers :as cfh] [app.common.files.helpers :as cfh]
[app.main.data.workspace.tokens.application :as dwta]
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.ui.components.color-bullet :refer [color-bullet]] [app.main.ui.components.color-bullet :refer [color-bullet]]
[app.main.ui.ds.foundations.assets.icon :refer [icon*]] [app.main.ui.ds.foundations.assets.icon :refer [icon*]]
[app.main.ui.ds.foundations.utilities.token.token-status :refer [token-status-icon*]] [app.main.ui.ds.foundations.utilities.token.token-status :refer [token-status-icon*]]
[app.main.ui.workspace.tokens.changes :as wtch]
[app.main.ui.workspace.tokens.token :as wtt] [app.main.ui.workspace.tokens.token :as wtt]
[app.util.dom :as dom] [app.util.dom :as dom]
[app.util.i18n :refer [tr]] [app.util.i18n :refer [tr]]
@ -106,7 +106,7 @@
(let [{:keys [name value type resolved-value]} token (let [{:keys [name value type resolved-value]} token
resolved-value-theme (:resolved-value theme-token) resolved-value-theme (:resolved-value theme-token)
resolved-value (or resolved-value-theme resolved-value) resolved-value (or resolved-value-theme resolved-value)
{:keys [title] :as token-props} (wtch/get-token-properties theme-token) {:keys [title] :as token-props} (dwta/get-token-properties theme-token)
applied-tokens (:applied-tokens shape) applied-tokens (:applied-tokens shape)
app-token-vals (set (vals applied-tokens)) app-token-vals (set (vals applied-tokens))
app-token-keys (keys applied-tokens) app-token-keys (keys applied-tokens)
@ -170,7 +170,7 @@
contains-path? (str/includes? name ".") contains-path? (str/includes? name ".")
{:keys [attributes all-attributes]} {:keys [attributes all-attributes]}
(get wtch/token-properties (:type token)) (get dwta/token-properties (:type token))
full-applied? full-applied?
(if has-selected? (if has-selected?

26
frontend/src/app/main/ui/workspace/tokens/update.cljs
View file

@ -13,8 +13,8 @@
[app.main.data.helpers :as dsh] [app.main.data.helpers :as dsh]
[app.main.data.workspace.shapes :as dwsh] [app.main.data.workspace.shapes :as dwsh]
[app.main.data.workspace.thumbnails :as dwt] [app.main.data.workspace.thumbnails :as dwt]
[app.main.data.workspace.tokens.application :as dwta]
[app.main.data.workspace.undo :as dwu] [app.main.data.workspace.undo :as dwu]
[app.main.ui.workspace.tokens.changes :as wtch]
[app.main.ui.workspace.tokens.style-dictionary :as wtsd] [app.main.ui.workspace.tokens.style-dictionary :as wtsd]
[app.util.time :as dt] [app.util.time :as dt]
[beicon.v2.core :as rx] [beicon.v2.core :as rx]
@ -27,18 +27,18 @@
(def filter-existing-values? false) (def filter-existing-values? false)
(def attributes->shape-update (def attributes->shape-update
{ctt/border-radius-keys wtch/update-shape-radius-for-corners {ctt/border-radius-keys dwta/update-shape-radius-for-corners
ctt/color-keys wtch/update-fill-stroke ctt/color-keys dwta/update-fill-stroke
ctt/stroke-width-keys wtch/update-stroke-width ctt/stroke-width-keys dwta/update-stroke-width
ctt/sizing-keys wtch/update-shape-dimensions ctt/sizing-keys dwta/update-shape-dimensions
ctt/opacity-keys wtch/update-opacity ctt/opacity-keys dwta/update-opacity
#{:x :y} wtch/update-shape-position #{:x :y} dwta/update-shape-position
#{:p1 :p2 :p3 :p4} wtch/update-layout-padding #{:p1 :p2 :p3 :p4} dwta/update-layout-padding
#{:m1 :m2 :m3 :m4} wtch/update-layout-item-margin #{:m1 :m2 :m3 :m4} dwta/update-layout-item-margin
#{:column-gap :row-gap} wtch/update-layout-spacing #{:column-gap :row-gap} dwta/update-layout-spacing
#{:width :height} wtch/update-shape-dimensions #{:width :height} dwta/update-shape-dimensions
#{:layout-item-min-w :layout-item-min-h :layout-item-max-w :layout-item-max-h} wtch/update-layout-sizing-limits #{:layout-item-min-w :layout-item-min-h :layout-item-max-w :layout-item-max-h} dwta/update-layout-sizing-limits
ctt/rotation-keys wtch/update-rotation}) ctt/rotation-keys dwta/update-rotation})
(def attribute-actions-map (def attribute-actions-map
(reduce (reduce

22
frontend/test/frontend_tests/logic/components_and_tokens.cljs
View file

@ -18,7 +18,7 @@
[app.main.data.tokens :as dt] [app.main.data.tokens :as dt]
[app.main.data.workspace.libraries :as dwl] [app.main.data.workspace.libraries :as dwl]
[app.main.data.workspace.selection :as dws] [app.main.data.workspace.selection :as dws]
[app.main.ui.workspace.tokens.changes :as wtch] [app.main.data.workspace.tokens.application :as dwta]
[app.main.ui.workspace.tokens.update :as wtu] [app.main.ui.workspace.tokens.update :as wtu]
[cljs.test :as t :include-macros true] [cljs.test :as t :include-macros true]
[frontend-tests.helpers.pages :as thp] [frontend-tests.helpers.pages :as thp]
@ -134,10 +134,10 @@
store (ths/setup-store file) store (ths/setup-store file)
;; ==== Action ;; ==== Action
events [(wtch/apply-token {:shape-ids [(cthi/id :frame1)] events [(dwta/apply-token {:shape-ids [(cthi/id :frame1)]
:attributes #{:r1 :r2 :r3 :r4} :attributes #{:r1 :r2 :r3 :r4}
:token (toht/get-token file "test-token-2") :token (toht/get-token file "test-token-2")
:on-update-shape wtch/update-shape-radius-all})] :on-update-shape dwta/update-shape-radius-all})]
step2 (fn [_] step2 (fn [_]
(let [events2 [(dwl/sync-file (:id file) (:id file))]] (let [events2 [(dwl/sync-file (:id file) (:id file))]]
@ -171,7 +171,7 @@
store (ths/setup-store file) store (ths/setup-store file)
;; ==== Action ;; ==== Action
events [(wtch/unapply-token {:shape-ids [(cthi/id :frame1)] events [(dwta/unapply-token {:shape-ids [(cthi/id :frame1)]
:attributes #{:r1 :r2 :r3 :r4} :attributes #{:r1 :r2 :r3 :r4}
:token (toht/get-token file "test-token-1")})] :token (toht/get-token file "test-token-1")})]
@ -242,14 +242,14 @@
store (ths/setup-store file) store (ths/setup-store file)
;; ==== Action ;; ==== Action
events [(wtch/apply-token {:shape-ids [(cthi/id :c-frame1)] events [(dwta/apply-token {:shape-ids [(cthi/id :c-frame1)]
:attributes #{:r1 :r2 :r3 :r4} :attributes #{:r1 :r2 :r3 :r4}
:token (toht/get-token file "test-token-2") :token (toht/get-token file "test-token-2")
:on-update-shape wtch/update-shape-radius-all}) :on-update-shape dwta/update-shape-radius-all})
(wtch/apply-token {:shape-ids [(cthi/id :frame1)] (dwta/apply-token {:shape-ids [(cthi/id :frame1)]
:attributes #{:r1 :r2 :r3 :r4} :attributes #{:r1 :r2 :r3 :r4}
:token (toht/get-token file "test-token-3") :token (toht/get-token file "test-token-3")
:on-update-shape wtch/update-shape-radius-all})] :on-update-shape dwta/update-shape-radius-all})]
step2 (fn [_] step2 (fn [_]
(let [events2 [(dwl/sync-file (:id file) (:id file))]] (let [events2 [(dwl/sync-file (:id file) (:id file))]]
@ -283,13 +283,13 @@
store (ths/setup-store file) store (ths/setup-store file)
;; ==== Action ;; ==== Action
events [(wtch/unapply-token {:shape-ids [(cthi/id :c-frame1)] events [(dwta/unapply-token {:shape-ids [(cthi/id :c-frame1)]
:attributes #{:r1 :r2 :r3 :r4} :attributes #{:r1 :r2 :r3 :r4}
:token (toht/get-token file "test-token-1")}) :token (toht/get-token file "test-token-1")})
(wtch/apply-token {:shape-ids [(cthi/id :frame1)] (dwta/apply-token {:shape-ids [(cthi/id :frame1)]
:attributes #{:r1 :r2 :r3 :r4} :attributes #{:r1 :r2 :r3 :r4}
:token (toht/get-token file "test-token-3") :token (toht/get-token file "test-token-3")
:on-update-shape wtch/update-shape-radius-all})] :on-update-shape dwta/update-shape-radius-all})]
step2 (fn [_] step2 (fn [_]
(let [events2 [(dwl/sync-file (:id file) (:id file))]] (let [events2 [(dwl/sync-file (:id file) (:id file))]]

86
frontend/test/frontend_tests/tokens/logic/token_actions_test.cljs
View file

@ -4,7 +4,7 @@
[app.common.test-helpers.files :as cthf] [app.common.test-helpers.files :as cthf]
[app.common.test-helpers.shapes :as cths] [app.common.test-helpers.shapes :as cths]
[app.common.types.tokens-lib :as ctob] [app.common.types.tokens-lib :as ctob]
[app.main.ui.workspace.tokens.changes :as wtch] [app.main.data.workspace.tokens.application :as dwta]
[cljs.test :as t :include-macros true] [cljs.test :as t :include-macros true]
[frontend-tests.helpers.pages :as thp] [frontend-tests.helpers.pages :as thp]
[frontend-tests.helpers.state :as ths] [frontend-tests.helpers.state :as ths]
@ -48,10 +48,10 @@
(let [file (setup-file-with-tokens) (let [file (setup-file-with-tokens)
store (ths/setup-store file) store (ths/setup-store file)
rect-1 (cths/get-shape file :rect-1) rect-1 (cths/get-shape file :rect-1)
events [(wtch/apply-token {:shape-ids [(:id rect-1)] events [(dwta/apply-token {:shape-ids [(:id rect-1)]
:attributes #{:r1 :r2 :r3 :r4} :attributes #{:r1 :r2 :r3 :r4}
:token (toht/get-token file "borderRadius.md") :token (toht/get-token file "borderRadius.md")
:on-update-shape wtch/update-shape-radius-all})]] :on-update-shape dwta/update-shape-radius-all})]]
(tohs/run-store-async (tohs/run-store-async
store done events store done events
(fn [new-state] (fn [new-state]
@ -73,14 +73,14 @@
(let [file (setup-file-with-tokens) (let [file (setup-file-with-tokens)
store (ths/setup-store file) store (ths/setup-store file)
rect-1 (cths/get-shape file :rect-1) rect-1 (cths/get-shape file :rect-1)
events [(wtch/apply-token {:shape-ids [(:id rect-1)] events [(dwta/apply-token {:shape-ids [(:id rect-1)]
:attributes #{:r1 :r2 :r3 :r4} :attributes #{:r1 :r2 :r3 :r4}
:token (toht/get-token file "borderRadius.sm") :token (toht/get-token file "borderRadius.sm")
:on-update-shape wtch/update-shape-radius-all}) :on-update-shape dwta/update-shape-radius-all})
(wtch/apply-token {:shape-ids [(:id rect-1)] (dwta/apply-token {:shape-ids [(:id rect-1)]
:attributes #{:r1 :r2 :r3 :r4} :attributes #{:r1 :r2 :r3 :r4}
:token (toht/get-token file "borderRadius.md") :token (toht/get-token file "borderRadius.md")
:on-update-shape wtch/update-shape-radius-all})]] :on-update-shape dwta/update-shape-radius-all})]]
(tohs/run-store-async (tohs/run-store-async
store done events store done events
(fn [new-state] (fn [new-state]
@ -101,17 +101,17 @@
store (ths/setup-store file) store (ths/setup-store file)
rect-1 (cths/get-shape file :rect-1) rect-1 (cths/get-shape file :rect-1)
events [;; Apply "borderRadius.sm" to all border radius attributes events [;; Apply "borderRadius.sm" to all border radius attributes
(wtch/apply-token {:attributes #{:r1 :r2 :r3 :r4} (dwta/apply-token {:attributes #{:r1 :r2 :r3 :r4}
:token (toht/get-token file "borderRadius.sm") :token (toht/get-token file "borderRadius.sm")
:shape-ids [(:id rect-1)] :shape-ids [(:id rect-1)]
:on-update-shape wtch/update-shape-radius-all}) :on-update-shape dwta/update-shape-radius-all})
;; Apply single `:r1` attribute to same shape ;; Apply single `:r1` attribute to same shape
;; while removing other attributes from the border-radius set ;; while removing other attributes from the border-radius set
;; but keep `:r4` for testing purposes ;; but keep `:r4` for testing purposes
(wtch/apply-token {:attributes #{:r1 :r2 :r3} (dwta/apply-token {:attributes #{:r1 :r2 :r3}
:token (toht/get-token file "borderRadius.md") :token (toht/get-token file "borderRadius.md")
:shape-ids [(:id rect-1)] :shape-ids [(:id rect-1)]
:on-update-shape wtch/update-shape-radius-all})]] :on-update-shape dwta/update-shape-radius-all})]]
(tohs/run-store-async (tohs/run-store-async
store done events store done events
(fn [new-state] (fn [new-state]
@ -133,14 +133,14 @@
store (ths/setup-store file) store (ths/setup-store file)
rect-1 (cths/get-shape file :rect-1) rect-1 (cths/get-shape file :rect-1)
rect-2 (cths/get-shape file :rect-2) rect-2 (cths/get-shape file :rect-2)
events [(wtch/apply-token {:shape-ids [(:id rect-1)] events [(dwta/apply-token {:shape-ids [(:id rect-1)]
:attributes #{:r3 :r4} :attributes #{:r3 :r4}
:token (toht/get-token file "borderRadius.sm") :token (toht/get-token file "borderRadius.sm")
:on-update-shape wtch/update-shape-radius-for-corners}) :on-update-shape dwta/update-shape-radius-for-corners})
(wtch/apply-token {:shape-ids [(:id rect-2)] (dwta/apply-token {:shape-ids [(:id rect-2)]
:attributes #{:r1 :r2 :r3 :r4} :attributes #{:r1 :r2 :r3 :r4}
:token (toht/get-token file "borderRadius.sm") :token (toht/get-token file "borderRadius.sm")
:on-update-shape wtch/update-shape-radius-all})]] :on-update-shape dwta/update-shape-radius-all})]]
(tohs/run-store-async (tohs/run-store-async
store done events store done events
(fn [new-state] (fn [new-state]
@ -185,22 +185,22 @@
store (ths/setup-store file) store (ths/setup-store file)
rect-1 (cths/get-shape file :rect-1) rect-1 (cths/get-shape file :rect-1)
rect-2 (cths/get-shape file :rect-2) rect-2 (cths/get-shape file :rect-2)
events [(wtch/apply-token {:shape-ids [(:id rect-1)] events [(dwta/apply-token {:shape-ids [(:id rect-1)]
:attributes #{:color} :attributes #{:color}
:token (toht/get-token file "color.primary") :token (toht/get-token file "color.primary")
:on-update-shape wtch/update-fill}) :on-update-shape dwta/update-fill})
(wtch/apply-token {:shape-ids [(:id rect-1)] (dwta/apply-token {:shape-ids [(:id rect-1)]
:attributes #{:stroke-color} :attributes #{:stroke-color}
:token (toht/get-token file "color.primary") :token (toht/get-token file "color.primary")
:on-update-shape wtch/update-stroke-color}) :on-update-shape dwta/update-stroke-color})
(wtch/apply-token {:shape-ids [(:id rect-2)] (dwta/apply-token {:shape-ids [(:id rect-2)]
:attributes #{:color} :attributes #{:color}
:token (toht/get-token file "color.secondary") :token (toht/get-token file "color.secondary")
:on-update-shape wtch/update-fill}) :on-update-shape dwta/update-fill})
(wtch/apply-token {:shape-ids [(:id rect-2)] (dwta/apply-token {:shape-ids [(:id rect-2)]
:attributes #{:stroke-color} :attributes #{:stroke-color}
:token (toht/get-token file "color.secondary") :token (toht/get-token file "color.secondary")
:on-update-shape wtch/update-stroke-color})]] :on-update-shape dwta/update-stroke-color})]]
(tohs/run-store-async (tohs/run-store-async
store done events store done events
(fn [new-state] (fn [new-state]
@ -239,10 +239,10 @@
#(ctob/add-token-in-set % "Set A" (ctob/make-token dimensions-token)))) #(ctob/add-token-in-set % "Set A" (ctob/make-token dimensions-token))))
store (ths/setup-store file) store (ths/setup-store file)
rect-1 (cths/get-shape file :rect-1) rect-1 (cths/get-shape file :rect-1)
events [(wtch/apply-token {:shape-ids [(:id rect-1)] events [(dwta/apply-token {:shape-ids [(:id rect-1)]
:attributes #{:width :height} :attributes #{:width :height}
:token (toht/get-token file "dimensions.sm") :token (toht/get-token file "dimensions.sm")
:on-update-shape wtch/update-shape-dimensions})]] :on-update-shape dwta/update-shape-dimensions})]]
(tohs/run-store-async (tohs/run-store-async
store done events store done events
(fn [new-state] (fn [new-state]
@ -272,10 +272,10 @@
store (ths/setup-store file) store (ths/setup-store file)
frame-1 (cths/get-shape file :frame-1) frame-1 (cths/get-shape file :frame-1)
frame-2 (cths/get-shape file :frame-2) frame-2 (cths/get-shape file :frame-2)
events [(wtch/apply-token {:shape-ids [(:id frame-1) (:id frame-2)] events [(dwta/apply-token {:shape-ids [(:id frame-1) (:id frame-2)]
:attributes #{:padding} :attributes #{:padding}
:token (toht/get-token file "padding.sm") :token (toht/get-token file "padding.sm")
:on-update-shape wtch/update-layout-padding})]] :on-update-shape dwta/update-layout-padding})]]
(tohs/run-store-async (tohs/run-store-async
store done events store done events
(fn [new-state] (fn [new-state]
@ -303,10 +303,10 @@
#(ctob/add-token-in-set % "Set A" (ctob/make-token sizing-token)))) #(ctob/add-token-in-set % "Set A" (ctob/make-token sizing-token))))
store (ths/setup-store file) store (ths/setup-store file)
rect-1 (cths/get-shape file :rect-1) rect-1 (cths/get-shape file :rect-1)
events [(wtch/apply-token {:shape-ids [(:id rect-1)] events [(dwta/apply-token {:shape-ids [(:id rect-1)]
:attributes #{:width :height} :attributes #{:width :height}
:token (toht/get-token file "sizing.sm") :token (toht/get-token file "sizing.sm")
:on-update-shape wtch/update-shape-dimensions})]] :on-update-shape dwta/update-shape-dimensions})]]
(tohs/run-store-async (tohs/run-store-async
store done events store done events
(fn [new-state] (fn [new-state]
@ -344,18 +344,18 @@
rect-1 (cths/get-shape file :rect-1) rect-1 (cths/get-shape file :rect-1)
rect-2 (cths/get-shape file :rect-2) rect-2 (cths/get-shape file :rect-2)
rect-3 (cths/get-shape file :rect-3) rect-3 (cths/get-shape file :rect-3)
events [(wtch/apply-token {:shape-ids [(:id rect-1)] events [(dwta/apply-token {:shape-ids [(:id rect-1)]
:attributes #{:opacity} :attributes #{:opacity}
:token (toht/get-token file "opacity.float") :token (toht/get-token file "opacity.float")
:on-update-shape wtch/update-opacity}) :on-update-shape dwta/update-opacity})
(wtch/apply-token {:shape-ids [(:id rect-2)] (dwta/apply-token {:shape-ids [(:id rect-2)]
:attributes #{:opacity} :attributes #{:opacity}
:token (toht/get-token file "opacity.percent") :token (toht/get-token file "opacity.percent")
:on-update-shape wtch/update-opacity}) :on-update-shape dwta/update-opacity})
(wtch/apply-token {:shape-ids [(:id rect-3)] (dwta/apply-token {:shape-ids [(:id rect-3)]
:attributes #{:opacity} :attributes #{:opacity}
:token (toht/get-token file "opacity.invalid") :token (toht/get-token file "opacity.invalid")
:on-update-shape wtch/update-opacity})]] :on-update-shape dwta/update-opacity})]]
(tohs/run-store-async (tohs/run-store-async
store done events store done events
(fn [new-state] (fn [new-state]
@ -388,10 +388,10 @@
#(ctob/add-token-in-set % "Set A" (ctob/make-token rotation-token)))) #(ctob/add-token-in-set % "Set A" (ctob/make-token rotation-token))))
store (ths/setup-store file) store (ths/setup-store file)
rect-1 (cths/get-shape file :rect-1) rect-1 (cths/get-shape file :rect-1)
events [(wtch/apply-token {:shape-ids [(:id rect-1)] events [(dwta/apply-token {:shape-ids [(:id rect-1)]
:attributes #{:rotation} :attributes #{:rotation}
:token (toht/get-token file "rotation.medium") :token (toht/get-token file "rotation.medium")
:on-update-shape wtch/update-rotation})]] :on-update-shape dwta/update-rotation})]]
(tohs/run-store-async (tohs/run-store-async
store done events store done events
(fn [new-state] (fn [new-state]
@ -419,10 +419,10 @@
store (ths/setup-store file) store (ths/setup-store file)
rect-with-stroke (cths/get-shape file :rect-1) rect-with-stroke (cths/get-shape file :rect-1)
rect-without-stroke (cths/get-shape file :rect-2) rect-without-stroke (cths/get-shape file :rect-2)
events [(wtch/apply-token {:shape-ids [(:id rect-with-stroke) (:id rect-without-stroke)] events [(dwta/apply-token {:shape-ids [(:id rect-with-stroke) (:id rect-without-stroke)]
:attributes #{:stroke-width} :attributes #{:stroke-width}
:token (toht/get-token file "stroke-width.sm") :token (toht/get-token file "stroke-width.sm")
:on-update-shape wtch/update-stroke-width})]] :on-update-shape dwta/update-stroke-width})]]
(tohs/run-store-async (tohs/run-store-async
store done events store done events
(fn [new-state] (fn [new-state]
@ -445,9 +445,9 @@
store (ths/setup-store file) store (ths/setup-store file)
rect-1 (cths/get-shape file :rect-1) rect-1 (cths/get-shape file :rect-1)
rect-2 (cths/get-shape file :rect-2) rect-2 (cths/get-shape file :rect-2)
events [(wtch/toggle-token {:shapes [rect-1 rect-2] events [(dwta/toggle-token {:shapes [rect-1 rect-2]
:token-type-props {:attributes #{:r1 :r2 :r3 :r4} :token-type-props {:attributes #{:r1 :r2 :r3 :r4}
:on-update-shape wtch/update-shape-radius-all} :on-update-shape dwta/update-shape-radius-all}
:token (toht/get-token file "borderRadius.md")})]] :token (toht/get-token file "borderRadius.md")})]]
(tohs/run-store-async (tohs/run-store-async
store done events store done events
@ -476,7 +476,7 @@
rect-without-token (cths/get-shape file :rect-2) rect-without-token (cths/get-shape file :rect-2)
rect-with-other-token (cths/get-shape file :rect-3) rect-with-other-token (cths/get-shape file :rect-3)
events [(wtch/toggle-token {:shapes [rect-with-token rect-without-token rect-with-other-token] events [(dwta/toggle-token {:shapes [rect-with-token rect-without-token rect-with-other-token]
:token (toht/get-token file "borderRadius.sm") :token (toht/get-token file "borderRadius.sm")
:token-type-props {:attributes #{:r1 :r2 :r3 :r4}}})]] :token-type-props {:attributes #{:r1 :r2 :r3 :r4}}})]]
(tohs/run-store-async (tohs/run-store-async
@ -509,7 +509,7 @@
rect-without-token (cths/get-shape file :rect-2) rect-without-token (cths/get-shape file :rect-2)
rect-with-other-token-2 (cths/get-shape file :rect-3) rect-with-other-token-2 (cths/get-shape file :rect-3)
events [(wtch/toggle-token {:shapes [rect-with-other-token-1 rect-without-token rect-with-other-token-2] events [(dwta/toggle-token {:shapes [rect-with-other-token-1 rect-without-token rect-with-other-token-2]
:token (toht/get-token file "borderRadius.sm") :token (toht/get-token file "borderRadius.sm")
:token-type-props {:attributes #{:r1 :r2 :r3 :r4}}})]] :token-type-props {:attributes #{:r1 :r2 :r3 :r4}}})]]
(tohs/run-store-async (tohs/run-store-async