mirror of
https://github.com/penpot/penpot.git
synced 2025-05-29 05:56:11 +02:00
🔧 Move token application to workspace.data
This commit is contained in:
Andrés Moya
parent
62a12a64a3
commit
abca763aa5
8 changed files with 116 additions and 114 deletions
|
|
@ -4,7 +4,7 @@
|
|||
;;
|
||||
;; Copyright (c) KALEIDOS INC
|
||||
|
||||
(ns app.main.ui.workspace.tokens.changes
|
||||
(ns app.main.data.workspace.tokens.application
|
||||
(:require
|
||||
[app.common.data :as d]
|
||||
[app.common.data.macros :as dm]
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
|
||||
(declare token-properties)
|
||||
|
||||
;; Token Updates ---------------------------------------------------------------
|
||||
;; Events to apply / unapply tokens to shapes ------------------------------------------------------------
|
||||
|
||||
(defn apply-token
|
||||
"Apply `attributes` that match `token` for `shape-ids`.
|
||||
|
|
@ -109,7 +109,9 @@
|
|||
:shape-ids shape-ids
|
||||
: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
|
||||
([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
|
||||
: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,
|
||||
;; becasue on future we will need to translate that labels and that
|
||||
|
|
@ -13,11 +13,11 @@
|
|||
[app.main.data.modal :as modal]
|
||||
[app.main.data.tokens :as dt]
|
||||
[app.main.data.workspace.shape-layout :as dwsl]
|
||||
[app.main.data.workspace.tokens.application :as dwta]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.components.dropdown :refer [dropdown]]
|
||||
[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.util.dom :as dom]
|
||||
[app.util.i18n :refer [tr]]
|
||||
|
|
@ -38,7 +38,7 @@
|
|||
|
||||
(defn generic-attribute-actions [attributes title {:keys [token selected-shapes on-update-shape hint]}]
|
||||
(let [on-update-shape-fn (or on-update-shape
|
||||
(-> (wtch/get-token-properties token)
|
||||
(-> (dwta/get-token-properties token)
|
||||
(:on-update-shape)))
|
||||
{:keys [selected-pred shape-ids]} (attribute-actions token selected-shapes attributes)]
|
||||
(map (fn [attribute]
|
||||
|
|
@ -52,8 +52,8 @@
|
|||
:selected? selected?
|
||||
:action (fn []
|
||||
(if selected?
|
||||
(st/emit! (wtch/unapply-token props))
|
||||
(st/emit! (wtch/apply-token (assoc props :on-update-shape on-update-shape-fn)))))}))
|
||||
(st/emit! (dwta/unapply-token props))
|
||||
(st/emit! (dwta/apply-token (assoc props :on-update-shape on-update-shape-fn)))))}))
|
||||
attributes)))
|
||||
|
||||
(defn all-or-separate-actions [{:keys [attribute-labels on-update-shape-all on-update-shape hint]}
|
||||
|
|
@ -67,8 +67,8 @@
|
|||
:selected? all-selected?
|
||||
:hint hint
|
||||
:action #(if all-selected?
|
||||
(st/emit! (wtch/unapply-token props))
|
||||
(st/emit! (wtch/apply-token (assoc props :on-update-shape (or on-update-shape-all on-update-shape)))))})
|
||||
(st/emit! (dwta/unapply-token props))
|
||||
(st/emit! (dwta/apply-token (assoc props :on-update-shape (or on-update-shape-all on-update-shape)))))})
|
||||
single-actions (map (fn [[attr title]]
|
||||
(let [selected? (selected-pred attr)]
|
||||
{:title title
|
||||
|
|
@ -78,10 +78,10 @@
|
|||
:shape-ids shape-ids}
|
||||
event (cond
|
||||
all-selected? (-> (assoc props :attributes-to-remove attributes)
|
||||
(wtch/apply-token))
|
||||
selected? (wtch/unapply-token props)
|
||||
(dwta/apply-token))
|
||||
selected? (dwta/unapply-token props)
|
||||
:else (-> (assoc props :on-update-shape on-update-shape)
|
||||
(wtch/apply-token)))]
|
||||
(dwta/apply-token)))]
|
||||
(st/emit! event))}))
|
||||
attribute-labels)]
|
||||
(concat [all-action] single-actions)))
|
||||
|
|
@ -105,17 +105,17 @@
|
|||
:token token
|
||||
:shape-ids shape-ids}]
|
||||
(if all-selected?
|
||||
(st/emit! (wtch/unapply-token props))
|
||||
(st/emit! (wtch/apply-token (assoc props :on-update-shape on-update-shape))))))}
|
||||
(st/emit! (dwta/unapply-token props))
|
||||
(st/emit! (dwta/apply-token (assoc props :on-update-shape on-update-shape))))))}
|
||||
{:title "Horizontal"
|
||||
:selected? horizontal-selected?
|
||||
:action (fn []
|
||||
(let [props {:token token
|
||||
:shape-ids shape-ids}
|
||||
event (cond
|
||||
all-selected? (wtch/apply-token (assoc props :attributes-to-remove vertical-attrs))
|
||||
horizontal-selected? (wtch/apply-token (assoc props :attributes-to-remove horizontal-attrs))
|
||||
:else (wtch/apply-token (assoc props
|
||||
all-selected? (dwta/apply-token (assoc props :attributes-to-remove vertical-attrs))
|
||||
horizontal-selected? (dwta/apply-token (assoc props :attributes-to-remove horizontal-attrs))
|
||||
:else (dwta/apply-token (assoc props
|
||||
:attributes horizontal-attrs
|
||||
:on-update-shape on-update-shape)))]
|
||||
(st/emit! event)))}
|
||||
|
|
@ -125,9 +125,9 @@
|
|||
(let [props {:token token
|
||||
:shape-ids shape-ids}
|
||||
event (cond
|
||||
all-selected? (wtch/apply-token (assoc props :attributes-to-remove horizontal-attrs))
|
||||
vertical-selected? (wtch/apply-token (assoc props :attributes-to-remove vertical-attrs))
|
||||
:else (wtch/apply-token (assoc props
|
||||
all-selected? (dwta/apply-token (assoc props :attributes-to-remove horizontal-attrs))
|
||||
vertical-selected? (dwta/apply-token (assoc props :attributes-to-remove vertical-attrs))
|
||||
:else (dwta/apply-token (assoc props
|
||||
:attributes vertical-attrs
|
||||
:on-update-shape on-update-shape)))]
|
||||
(st/emit! event)))}]
|
||||
|
|
@ -147,10 +147,10 @@
|
|||
:shape-ids shape-ids}
|
||||
event (cond
|
||||
all-selected? (-> (assoc props :attributes-to-remove attrs)
|
||||
(wtch/apply-token))
|
||||
selected? (wtch/unapply-token props)
|
||||
(dwta/apply-token))
|
||||
selected? (dwta/unapply-token props)
|
||||
:else (-> (assoc props :on-update-shape on-update-shape)
|
||||
(wtch/apply-token)))]
|
||||
(dwta/apply-token)))]
|
||||
(st/emit! event))}))
|
||||
all-attr-labels)]
|
||||
(concat multi-items single-items)))
|
||||
|
|
@ -159,13 +159,13 @@
|
|||
(st/emit!
|
||||
(when (= (count attributes) 1)
|
||||
(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]
|
||||
(st/emit!
|
||||
(when (= (count attributes) 1)
|
||||
(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}]
|
||||
(let [padding-items (layout-spacing-items {:token token
|
||||
|
|
@ -195,7 +195,7 @@
|
|||
gap-items (all-or-separate-actions {:attribute-labels {:column-gap "Column Gap"
|
||||
:row-gap "Row Gap"}
|
||||
:hint (tr "workspace.token.gaps")
|
||||
:on-update-shape wtch/update-layout-spacing}
|
||||
:on-update-shape dwta/update-layout-spacing}
|
||||
context-data)]
|
||||
(concat gap-items
|
||||
[:separator]
|
||||
|
|
@ -208,25 +208,25 @@
|
|||
(all-or-separate-actions {:attribute-labels {:width "Width"
|
||||
:height "Height"}
|
||||
:hint (tr "workspace.token.size")
|
||||
:on-update-shape wtch/update-shape-dimensions}
|
||||
:on-update-shape dwta/update-shape-dimensions}
|
||||
context-data)
|
||||
[:separator]
|
||||
(all-or-separate-actions {:attribute-labels {:layout-item-min-w "Min Width"
|
||||
:layout-item-min-h "Min Height"}
|
||||
:hint (tr "workspace.token.min-size")
|
||||
:on-update-shape wtch/update-layout-sizing-limits}
|
||||
:on-update-shape dwta/update-layout-sizing-limits}
|
||||
context-data)
|
||||
[:separator]
|
||||
(all-or-separate-actions {:attribute-labels {:layout-item-max-w "Max Width"
|
||||
:layout-item-max-h "Max Height"}
|
||||
:hint (tr "workspace.token.max-size")
|
||||
:on-update-shape wtch/update-layout-sizing-limits}
|
||||
:on-update-shape dwta/update-layout-sizing-limits}
|
||||
context-data)))
|
||||
|
||||
(defn update-shape-radius-for-corners [value shape-ids attributes]
|
||||
(st/emit!
|
||||
(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
|
||||
(let [stroke-width (partial generic-attribute-actions #{:stroke-width} "Stroke Width")]
|
||||
|
|
@ -235,11 +235,11 @@
|
|||
:r4 "Bottom Left"
|
||||
:r3 "Bottom Right"}
|
||||
: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})
|
||||
: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 #{:stroke-color} "Stroke" (assoc context-data :on-update-shape wtch/update-stroke-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 dwta/update-stroke-color))])
|
||||
:spacing spacing-attribute-actions
|
||||
:sizing sizing-attribute-actions
|
||||
:rotation (partial generic-attribute-actions #{:rotation} "Rotation")
|
||||
|
|
@ -252,13 +252,13 @@
|
|||
:separator
|
||||
{:title "Border Radius" :submenu :border-radius}]
|
||||
[: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]
|
||||
(generic-attribute-actions #{:x} "X" (assoc context-data :on-update-shape wtch/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 #{: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 dwta/update-shape-position))))}))
|
||||
|
||||
(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")
|
||||
:no-selectable true
|
||||
:action (fn [event]
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@
|
|||
[app.common.types.tokens-lib :as ctob]
|
||||
[app.main.data.modal :as modal]
|
||||
[app.main.data.tokens :as dt]
|
||||
[app.main.data.workspace.tokens.application :as dwta]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.store :as st]
|
||||
[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.workspace.colorpicker :as colorpicker]
|
||||
[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-tokens :refer [input-tokens*]]
|
||||
[app.main.ui.workspace.tokens.errors :as wte]
|
||||
|
|
@ -239,7 +239,7 @@
|
|||
[{:keys [token token-type action selected-token-set-name on-display-colorpicker]}]
|
||||
(let [create? (not (instance? ctob/Token token))
|
||||
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)
|
||||
selected-set-tokens (mf/deref refs/workspace-selected-token-set-tokens)
|
||||
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@
|
|||
[app.main.data.modal :as modal]
|
||||
[app.main.data.notifications :as ntf]
|
||||
[app.main.data.tokens :as dt]
|
||||
[app.main.data.workspace.tokens.application :as dwta]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.store :as st]
|
||||
[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.resize :refer [use-resize-hook]]
|
||||
[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.errors :as wte]
|
||||
[app.main.ui.workspace.tokens.sets :as tsets]
|
||||
|
|
@ -70,7 +70,7 @@
|
|||
{::mf/private true}
|
||||
[{:keys [type tokens selected-shapes active-theme-tokens is-open]}]
|
||||
(let [{:keys [modal title]}
|
||||
(get wtch/token-properties type)
|
||||
(get dwta/token-properties type)
|
||||
|
||||
can-edit?
|
||||
(mf/use-ctx ctx/can-edit?)
|
||||
|
|
@ -116,7 +116,7 @@
|
|||
(fn [event token]
|
||||
(dom/stop-propagation event)
|
||||
(when (seq selected-shapes)
|
||||
(st/emit! (wtch/toggle-token {:token token
|
||||
(st/emit! (dwta/toggle-token {:token token
|
||||
:shapes selected-shapes})))))]
|
||||
|
||||
[:div {:on-click on-toggle-open-click :class (stl/css :token-section-wrapper)}
|
||||
|
|
@ -151,7 +151,7 @@
|
|||
[tokens-by-type]
|
||||
(loop [empty #js []
|
||||
filled #js []
|
||||
types (-> wtch/token-properties keys seq)]
|
||||
types (-> dwta/token-properties keys seq)]
|
||||
(if-let [type (first types)]
|
||||
(if (not-empty (get tokens-by-type type))
|
||||
(recur empty
|
||||
|
|
|
|||
|
|
@ -11,11 +11,11 @@
|
|||
(:require
|
||||
[app.common.data :as d]
|
||||
[app.common.files.helpers :as cfh]
|
||||
[app.main.data.workspace.tokens.application :as dwta]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.ui.components.color-bullet :refer [color-bullet]]
|
||||
[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.workspace.tokens.changes :as wtch]
|
||||
[app.main.ui.workspace.tokens.token :as wtt]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.i18n :refer [tr]]
|
||||
|
|
@ -106,7 +106,7 @@
|
|||
(let [{:keys [name value type resolved-value]} token
|
||||
resolved-value-theme (:resolved-value theme-token)
|
||||
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)
|
||||
app-token-vals (set (vals applied-tokens))
|
||||
app-token-keys (keys applied-tokens)
|
||||
|
|
@ -170,7 +170,7 @@
|
|||
contains-path? (str/includes? name ".")
|
||||
|
||||
{:keys [attributes all-attributes]}
|
||||
(get wtch/token-properties (:type token))
|
||||
(get dwta/token-properties (:type token))
|
||||
|
||||
full-applied?
|
||||
(if has-selected?
|
||||
|
|
|
|||
|
|
@ -13,8 +13,8 @@
|
|||
[app.main.data.helpers :as dsh]
|
||||
[app.main.data.workspace.shapes :as dwsh]
|
||||
[app.main.data.workspace.thumbnails :as dwt]
|
||||
[app.main.data.workspace.tokens.application :as dwta]
|
||||
[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.util.time :as dt]
|
||||
[beicon.v2.core :as rx]
|
||||
|
|
@ -27,18 +27,18 @@
|
|||
(def filter-existing-values? false)
|
||||
|
||||
(def attributes->shape-update
|
||||
{ctt/border-radius-keys wtch/update-shape-radius-for-corners
|
||||
ctt/color-keys wtch/update-fill-stroke
|
||||
ctt/stroke-width-keys wtch/update-stroke-width
|
||||
ctt/sizing-keys wtch/update-shape-dimensions
|
||||
ctt/opacity-keys wtch/update-opacity
|
||||
#{:x :y} wtch/update-shape-position
|
||||
#{:p1 :p2 :p3 :p4} wtch/update-layout-padding
|
||||
#{:m1 :m2 :m3 :m4} wtch/update-layout-item-margin
|
||||
#{:column-gap :row-gap} wtch/update-layout-spacing
|
||||
#{:width :height} wtch/update-shape-dimensions
|
||||
#{:layout-item-min-w :layout-item-min-h :layout-item-max-w :layout-item-max-h} wtch/update-layout-sizing-limits
|
||||
ctt/rotation-keys wtch/update-rotation})
|
||||
{ctt/border-radius-keys dwta/update-shape-radius-for-corners
|
||||
ctt/color-keys dwta/update-fill-stroke
|
||||
ctt/stroke-width-keys dwta/update-stroke-width
|
||||
ctt/sizing-keys dwta/update-shape-dimensions
|
||||
ctt/opacity-keys dwta/update-opacity
|
||||
#{:x :y} dwta/update-shape-position
|
||||
#{:p1 :p2 :p3 :p4} dwta/update-layout-padding
|
||||
#{:m1 :m2 :m3 :m4} dwta/update-layout-item-margin
|
||||
#{:column-gap :row-gap} dwta/update-layout-spacing
|
||||
#{:width :height} dwta/update-shape-dimensions
|
||||
#{:layout-item-min-w :layout-item-min-h :layout-item-max-w :layout-item-max-h} dwta/update-layout-sizing-limits
|
||||
ctt/rotation-keys dwta/update-rotation})
|
||||
|
||||
(def attribute-actions-map
|
||||
(reduce
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue