mirror of
https://github.com/penpot/penpot.git
synced 2025-01-06 14:50:20 -05:00
Refactor - Separate core into namespaces: changes, token_types
This commit is contained in:
Florian Schroedl
parent
03370c267d
commit
56e72b5247
10 changed files with 288 additions and 254 deletions
|
|
@ -14,10 +14,8 @@
|
|||
[app.config :as cf]
|
||||
[app.main.data.events :as-alias ev]
|
||||
[app.main.data.workspace :as udw]
|
||||
[app.main.data.workspace.changes :as dch]
|
||||
[app.main.data.workspace.grid-layout.editor :as dwge]
|
||||
[app.main.data.workspace.shape-layout :as dwsl]
|
||||
[app.main.data.workspace.undo :as dwu]
|
||||
[app.main.features :as features]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.store :as st]
|
||||
|
|
@ -31,6 +29,7 @@
|
|||
[app.main.ui.icons :as i]
|
||||
[app.main.ui.workspace.tokens.core :as wtc]
|
||||
[app.main.ui.workspace.tokens.editable-select :refer [editable-select]]
|
||||
[app.main.ui.workspace.tokens.token-types :as wtty]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.i18n :as i18n :refer [tr]]
|
||||
[app.util.keyboard :as kbd]
|
||||
|
|
@ -864,7 +863,7 @@
|
|||
(wtc/tokens-name-map->select-options
|
||||
{:shape shape
|
||||
:tokens spacing-tokens
|
||||
:attributes (wtc/token-attributes :spacing)
|
||||
:attributes (wtty/token-attributes :spacing)
|
||||
:selected-attributes #{:spacing-column}})))
|
||||
|
||||
spacing-row-options (mf/use-memo
|
||||
|
|
@ -873,7 +872,7 @@
|
|||
(wtc/tokens-name-map->select-options
|
||||
{:shape shape
|
||||
:tokens spacing-tokens
|
||||
:attributes (wtc/token-attributes :spacing)
|
||||
:attributes (wtty/token-attributes :spacing)
|
||||
:selected-attributes #{:spacing-row}})))
|
||||
|
||||
padding-x-options (mf/use-memo
|
||||
|
|
@ -882,7 +881,7 @@
|
|||
(wtc/tokens-name-map->select-options
|
||||
{:shape shape
|
||||
:tokens spacing-tokens
|
||||
:attributes (wtc/token-attributes :spacing)
|
||||
:attributes (wtty/token-attributes :spacing)
|
||||
:selected-attributes #{:padding-p1 :padding-p3}})))
|
||||
|
||||
padding-y-options (mf/use-memo
|
||||
|
|
@ -891,7 +890,7 @@
|
|||
(wtc/tokens-name-map->select-options
|
||||
{:shape shape
|
||||
:tokens spacing-tokens
|
||||
:attributes (wtc/token-attributes :spacing)
|
||||
:attributes (wtty/token-attributes :spacing)
|
||||
:selected-attributes #{:padding-p2 :padding-p4}})))
|
||||
|
||||
on-add-layout
|
||||
|
|
|
|||
|
|
@ -27,6 +27,7 @@
|
|||
[app.main.ui.workspace.tokens.core :as wtc]
|
||||
[app.main.ui.workspace.tokens.editable-select :refer [editable-select]]
|
||||
[app.main.ui.workspace.tokens.style-dictionary :as sd]
|
||||
[app.main.ui.workspace.tokens.token-types :as wtty]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.i18n :as i18n :refer [tr]]
|
||||
[clojure.set :refer [rename-keys union]]
|
||||
|
|
@ -109,21 +110,21 @@
|
|||
#(wtc/tokens-name-map->select-options
|
||||
{:shape shape
|
||||
:tokens border-radius-tokens
|
||||
:attributes (wtc/token-attributes :border-radius)}))
|
||||
:attributes (wtty/token-attributes :border-radius)}))
|
||||
sizing-tokens (:sizing tokens-by-type)
|
||||
width-options (mf/use-memo
|
||||
(mf/deps shape sizing-tokens)
|
||||
#(wtc/tokens-name-map->select-options
|
||||
{:shape shape
|
||||
:tokens sizing-tokens
|
||||
:attributes (wtc/token-attributes :sizing)
|
||||
:attributes (wtty/token-attributes :sizing)
|
||||
:selected-attributes #{:width}}))
|
||||
height-options (mf/use-memo
|
||||
(mf/deps shape sizing-tokens)
|
||||
#(wtc/tokens-name-map->select-options
|
||||
{:shape shape
|
||||
:tokens sizing-tokens
|
||||
:attributes (wtc/token-attributes :sizing)
|
||||
:attributes (wtty/token-attributes :sizing)
|
||||
:selected-attributes #{:height}}))
|
||||
|
||||
flex-child? (->> selection-parents (some ctl/flex-layout?))
|
||||
|
|
@ -330,7 +331,7 @@
|
|||
(let [token-value (wtc/maybe-resolve-token-value token)]
|
||||
(st/emit!
|
||||
(change-radius (fn [shape]
|
||||
(-> (dt/unapply-token-id shape (wtc/token-attributes :border-radius))
|
||||
(-> (dt/unapply-token-id shape (wtty/token-attributes :border-radius))
|
||||
(ctsr/set-radius-1 token-value))))))))
|
||||
|
||||
on-radius-1-change
|
||||
|
|
@ -342,7 +343,7 @@
|
|||
(change-radius (fn [shape]
|
||||
(-> (dt/maybe-apply-token-to-shape {:token (when token-value value)
|
||||
:shape shape
|
||||
:attributes (wtc/token-attributes :border-radius)})
|
||||
:attributes (wtty/token-attributes :border-radius)})
|
||||
(ctsr/set-radius-1 (or token-value value)))))))))
|
||||
|
||||
on-radius-multi-change
|
||||
|
|
|
|||
141
frontend/src/app/main/ui/workspace/tokens/changes.cljs
Normal file
141
frontend/src/app/main/ui/workspace/tokens/changes.cljs
Normal file
|
|
@ -0,0 +1,141 @@
|
|||
;; This Source Code Form is subject to the terms of the Mozilla Public
|
||||
;; License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
;;
|
||||
;; Copyright (c) KALEIDOS INC
|
||||
|
||||
(ns app.main.ui.workspace.tokens.changes
|
||||
(:require
|
||||
[app.common.types.token :as ctt]
|
||||
[app.common.types.shape.radius :as ctsr]
|
||||
[app.main.data.tokens :as dt]
|
||||
[app.main.data.workspace.changes :as dch]
|
||||
[app.main.data.workspace :as udw]
|
||||
[app.main.data.workspace.shape-layout :as dwsl]
|
||||
[app.main.data.workspace.transforms :as dwt]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.workspace.tokens.core :as wtc]
|
||||
[app.main.ui.workspace.tokens.style-dictionary :as sd]
|
||||
[app.main.ui.workspace.tokens.token :as wtt]
|
||||
[beicon.v2.core :as rx]
|
||||
[clojure.set :as set]
|
||||
[potok.v2.core :as ptk]
|
||||
[promesa.core :as p]))
|
||||
|
||||
;; Token Updates ---------------------------------------------------------------
|
||||
|
||||
(defn on-apply-token [{:keys [token token-type-props selected-shapes] :as _props}]
|
||||
(let [{:keys [attributes on-apply on-update-shape]
|
||||
:or {on-apply dt/update-token-from-attributes}} token-type-props
|
||||
shape-ids (->> selected-shapes
|
||||
(eduction
|
||||
(remove #(wtt/shapes-token-applied? token % attributes))
|
||||
(map :id)))]
|
||||
|
||||
(p/let [sd-tokens (sd/resolve-workspace-tokens+ {:debug? true})]
|
||||
(let [resolved-token (get sd-tokens (:id token))
|
||||
resolved-token-value (wtt/resolve-token-value resolved-token)]
|
||||
(doseq [shape selected-shapes]
|
||||
(st/emit! (on-apply {:token-id (:id token)
|
||||
:shape-id (:id shape)
|
||||
:attributes attributes}))
|
||||
(on-update-shape resolved-token-value shape-ids attributes))))))
|
||||
|
||||
;; Shape Updates ---------------------------------------------------------------
|
||||
|
||||
(defn update-shape-radius-all [value shape-ids]
|
||||
(dch/update-shapes shape-ids
|
||||
(fn [shape]
|
||||
(when (ctsr/has-radius? shape)
|
||||
(ctsr/set-radius-1 shape value)))
|
||||
{:reg-objects? true
|
||||
:attrs ctt/border-radius-keys}))
|
||||
|
||||
(defn update-opacity [value shape-ids]
|
||||
(dch/update-shapes shape-ids #(assoc % :opacity value)))
|
||||
|
||||
(defn update-rotation [value shape-ids]
|
||||
(ptk/reify ::update-shape-dimensions
|
||||
ptk/WatchEvent
|
||||
(watch [_ _ _]
|
||||
(rx/of
|
||||
(udw/trigger-bounding-box-cloaking shape-ids)
|
||||
(udw/increase-rotation shape-ids value)))))
|
||||
|
||||
(defn update-shape-radius-single-corner [value shape-ids attributes]
|
||||
(dch/update-shapes shape-ids
|
||||
(fn [shape]
|
||||
(when (ctsr/has-radius? shape)
|
||||
(cond-> shape
|
||||
(:rx shape) (ctsr/switch-to-radius-4)
|
||||
:always (ctsr/set-radius-4 (first attributes) value))))
|
||||
{:reg-objects? true
|
||||
:attrs [:rx :ry :r1 :r2 :r3 :r4]}))
|
||||
|
||||
(defn update-stroke-width
|
||||
[value shape-ids]
|
||||
(dch/update-shapes shape-ids (fn [shape]
|
||||
(when (seq (:strokes shape))
|
||||
(assoc-in shape [:strokes 0 :stroke-width] value)))))
|
||||
|
||||
(defn update-layout-spacing [value shape-ids attributes]
|
||||
(if-let [layout-gap (cond
|
||||
(:row-gap attributes) {:row-gap value}
|
||||
(:column-gap attributes) {:column-gap value})]
|
||||
(dwsl/update-layout shape-ids {:layout-gap layout-gap})
|
||||
(dwsl/update-layout shape-ids {:layout-padding (zipmap attributes (repeat value))})))
|
||||
|
||||
(defn update-shape-dimensions [value shape-ids attributes]
|
||||
(ptk/reify ::update-shape-dimensions
|
||||
ptk/WatchEvent
|
||||
(watch [_ _ _]
|
||||
(rx/of
|
||||
(when (:width attributes) (dwt/update-dimensions shape-ids :width value))
|
||||
(when (:height attributes) (dwt/update-dimensions shape-ids :height value))))))
|
||||
|
||||
(defn update-layout-spacing-column [value shape-ids]
|
||||
(ptk/reify ::update-layout-spacing-column
|
||||
ptk/WatchEvent
|
||||
(watch [_ state _]
|
||||
(rx/concat
|
||||
(for [shape-id shape-ids]
|
||||
(let [shape (dt/get-shape-from-state shape-id state)
|
||||
layout-direction (:layout-flex-dir shape)
|
||||
layout-update (if (or (= layout-direction :row-reverse) (= layout-direction :row))
|
||||
{:layout-gap {:column-gap value}}
|
||||
{:layout-gap {:row-gap value}})]
|
||||
(dwsl/update-layout [shape-id] layout-update)))))))
|
||||
|
||||
(defn update-shape-position [value shape-ids attributes]
|
||||
(doseq [shape-id shape-ids]
|
||||
(st/emit! (dwt/update-position shape-id {(first attributes) value}))))
|
||||
|
||||
(defn apply-dimensions-token [{:keys [token-id token-type-props selected-shapes]} attributes]
|
||||
(let [token (dt/get-token-data-from-token-id token-id)
|
||||
attributes (set attributes)
|
||||
updated-token-type-props (cond
|
||||
(set/superset? #{:x :y} attributes)
|
||||
(assoc token-type-props
|
||||
:on-update-shape update-shape-position
|
||||
:attributes attributes)
|
||||
|
||||
(set/superset? #{:stroke-width} attributes)
|
||||
(assoc token-type-props
|
||||
:on-update-shape update-stroke-width
|
||||
:attributes attributes)
|
||||
|
||||
:else token-type-props)]
|
||||
(wtc/on-apply-token {:token token
|
||||
:token-type-props updated-token-type-props
|
||||
:selected-shapes selected-shapes})))
|
||||
|
||||
(defn update-layout-sizing-limits [value shape-ids attributes]
|
||||
(ptk/reify ::update-layout-sizing-limits
|
||||
ptk/WatchEvent
|
||||
(watch [_ _ _]
|
||||
(let [props (-> {:layout-item-min-w value
|
||||
:layout-item-min-h value
|
||||
:layout-item-max-w value
|
||||
:layout-item-max-h value}
|
||||
(select-keys attributes))]
|
||||
(dwsl/update-layout-child shape-ids props)))))
|
||||
|
|
@ -11,79 +11,19 @@
|
|||
[app.main.data.modal :as modal]
|
||||
[app.main.data.tokens :as dt]
|
||||
[app.main.data.workspace.shape-layout :as dwsl]
|
||||
[app.main.data.workspace.transforms :as dwt]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.components.dropdown :refer [dropdown]]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.main.ui.workspace.tokens.changes :as wtch]
|
||||
[app.main.ui.workspace.tokens.core :as wtc]
|
||||
[app.main.ui.workspace.tokens.token :as wtt]
|
||||
[app.main.ui.workspace.tokens.token-types :as wtty]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.timers :as timers]
|
||||
[beicon.v2.core :as rx]
|
||||
[clojure.set :as set]
|
||||
[okulary.core :as l]
|
||||
[potok.v2.core :as ptk]
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
;; Events ----------------------------------------------------------------------
|
||||
|
||||
(defn update-layout-spacing [value shape-ids attributes]
|
||||
(if-let [layout-gap (cond
|
||||
(:row-gap attributes) {:row-gap value}
|
||||
(:column-gap attributes) {:column-gap value})]
|
||||
(dwsl/update-layout shape-ids {:layout-gap layout-gap})
|
||||
(dwsl/update-layout shape-ids {:layout-padding (zipmap attributes (repeat value))})))
|
||||
|
||||
(defn apply-spacing-token [{:keys [token-id token-type-props selected-shapes]} attributes]
|
||||
(let [token (dt/get-token-data-from-token-id token-id)
|
||||
attributes (set attributes)
|
||||
updated-token-type-props (assoc token-type-props
|
||||
:on-update-shape update-layout-spacing
|
||||
:attributes attributes)]
|
||||
(wtc/on-apply-token {:token token
|
||||
:token-type-props updated-token-type-props
|
||||
:selected-shapes selected-shapes})))
|
||||
|
||||
(defn update-shape-position [value shape-ids attributes]
|
||||
(doseq [shape-id shape-ids]
|
||||
(st/emit! (dwt/update-position shape-id {(first attributes) value}))))
|
||||
|
||||
(defn apply-dimensions-token [{:keys [token-id token-type-props selected-shapes]} attributes]
|
||||
(let [token (dt/get-token-data-from-token-id token-id)
|
||||
attributes (set attributes)
|
||||
updated-token-type-props (cond
|
||||
(set/superset? #{:x :y} attributes)
|
||||
(assoc token-type-props
|
||||
:on-update-shape update-shape-position
|
||||
:attributes attributes)
|
||||
|
||||
(set/superset? #{:stroke-width} attributes)
|
||||
(assoc token-type-props
|
||||
:on-update-shape wtc/update-stroke-width
|
||||
:attributes attributes)
|
||||
|
||||
:else token-type-props)]
|
||||
(wtc/on-apply-token {:token token
|
||||
:token-type-props updated-token-type-props
|
||||
:selected-shapes selected-shapes})))
|
||||
|
||||
(defn update-shape-dimensions [value shape-ids attributes]
|
||||
(ptk/reify ::update-shape-dimensions
|
||||
ptk/WatchEvent
|
||||
(watch [_ _ _]
|
||||
(rx/of
|
||||
(when (:width attributes) (dwt/update-dimensions shape-ids :width value))
|
||||
(when (:height attributes) (dwt/update-dimensions shape-ids :height value))))))
|
||||
|
||||
(defn update-layout-sizing-limits [value shape-ids attributes]
|
||||
(let [props (-> {:layout-item-min-w value
|
||||
:layout-item-min-h value
|
||||
:layout-item-max-w value
|
||||
:layout-item-max-h value}
|
||||
(select-keys attributes))]
|
||||
(dwsl/update-layout-child shape-ids props)))
|
||||
|
||||
;; Actions ---------------------------------------------------------------------
|
||||
|
||||
(defn attribute-actions [token selected-shapes attributes]
|
||||
|
|
@ -94,7 +34,7 @@
|
|||
:selected-pred #(seq (% ids-by-attributes))}))
|
||||
|
||||
(defn generic-attribute-actions [attributes title {:keys [token selected-shapes]}]
|
||||
(let [{:keys [on-update-shape]} (get wtc/token-types (:type token))
|
||||
(let [{:keys [on-update-shape]} (get wtty/token-types (:type token))
|
||||
{:keys [selected-pred shape-ids]} (attribute-actions token selected-shapes attributes)]
|
||||
(map (fn [attribute]
|
||||
(let [selected? (selected-pred attribute)
|
||||
|
|
@ -212,7 +152,7 @@
|
|||
(st/emit! event))}))))
|
||||
gap-items (all-or-sepearate-actions {:attribute-labels {:column-gap "Column Gap"
|
||||
:row-gap "Row Gap"}
|
||||
:on-update-shape update-layout-spacing}
|
||||
:on-update-shape wtch/update-layout-spacing}
|
||||
context-data)]
|
||||
(concat padding-items
|
||||
single-padding-items
|
||||
|
|
@ -223,17 +163,17 @@
|
|||
(concat
|
||||
(all-or-sepearate-actions {:attribute-labels {:width "Width"
|
||||
:height "Height"}
|
||||
:on-update-shape update-shape-dimensions}
|
||||
:on-update-shape wtch/update-shape-dimensions}
|
||||
context-data)
|
||||
[:separator]
|
||||
(all-or-sepearate-actions {:attribute-labels {:layout-item-min-w "Min Width"
|
||||
:layout-item-min-h "Min Height"}
|
||||
:on-update-shape update-layout-sizing-limits}
|
||||
:on-update-shape wtch/update-layout-sizing-limits}
|
||||
context-data)
|
||||
[:separator]
|
||||
(all-or-sepearate-actions {:attribute-labels {:layout-item-max-w "Max Width"
|
||||
:layout-item-max-h "Max Height"}
|
||||
:on-update-shape update-layout-sizing-limits}
|
||||
:on-update-shape wtch/update-layout-sizing-limits}
|
||||
context-data)))
|
||||
|
||||
(def shape-attribute-actions-map
|
||||
|
|
@ -242,8 +182,8 @@
|
|||
:r2 "Top Right"
|
||||
:r4 "Bottom Left"
|
||||
:r3 "Bottom Right"}
|
||||
:on-update-shape-all wtc/update-shape-radius-all
|
||||
:on-update-shape wtc/update-shape-radius-single-corner})
|
||||
:on-update-shape-all wtch/update-shape-radius-all
|
||||
:on-update-shape wtch/update-shape-radius-single-corner})
|
||||
:spacing spacing-attribute-actions
|
||||
:sizing sizing-attribute-actions
|
||||
:rotation (partial generic-attribute-actions #{:rotation} "Rotation")
|
||||
|
|
@ -261,7 +201,7 @@
|
|||
(generic-attribute-actions #{:y} "Y" context-data)))}))
|
||||
|
||||
(defn default-actions [{:keys [token]}]
|
||||
(let [{:keys [modal]} (get wtc/token-types token)]
|
||||
(let [{:keys [modal]} (get wtty/token-types token)]
|
||||
[{:title "Delete Token"
|
||||
:action #(st/emit! (dt/delete-token (:id token)))}
|
||||
{:title "Duplicate Token"
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
|
||||
;; Helpers ---------------------------------------------------------------------
|
||||
|
||||
(defn resolve-token-value [{:keys [value resolved-value] :as token}]
|
||||
(defn resolve-token-value [{:keys [value resolved-value] :as _token}]
|
||||
(or
|
||||
resolved-value
|
||||
(d/parse-double value)))
|
||||
|
|
@ -48,64 +48,6 @@
|
|||
(cond-> (assoc item :label name)
|
||||
(wtt/token-applied? item shape (or selected-attributes attributes)) (assoc :selected? true))))))
|
||||
|
||||
;; Shape Update Functions ------------------------------------------------------
|
||||
|
||||
(defn update-shape-radius-single-corner [value shape-ids attributes]
|
||||
(dch/update-shapes shape-ids
|
||||
(fn [shape]
|
||||
(when (ctsr/has-radius? shape)
|
||||
(cond-> shape
|
||||
(:rx shape) (ctsr/switch-to-radius-4)
|
||||
:always (ctsr/set-radius-4 (first attributes) value))))
|
||||
{:reg-objects? true
|
||||
:attrs [:rx :ry :r1 :r2 :r3 :r4]}))
|
||||
|
||||
(defn update-shape-radius-all [value shape-ids]
|
||||
(dch/update-shapes shape-ids
|
||||
(fn [shape]
|
||||
(when (ctsr/has-radius? shape)
|
||||
(ctsr/set-radius-1 shape value)))
|
||||
{:reg-objects? true
|
||||
:attrs ctt/border-radius-keys}))
|
||||
|
||||
(defn update-shape-dimensions [value shape-ids]
|
||||
(ptk/reify ::update-shape-dimensions
|
||||
ptk/WatchEvent
|
||||
(watch [_ _ _]
|
||||
(rx/of
|
||||
(dwt/update-dimensions shape-ids :width value)
|
||||
(dwt/update-dimensions shape-ids :height value)))))
|
||||
|
||||
(defn update-opacity [value shape-ids]
|
||||
(dch/update-shapes shape-ids #(assoc % :opacity value)))
|
||||
|
||||
(defn update-stroke-width
|
||||
[value shape-ids]
|
||||
(dch/update-shapes shape-ids (fn [shape]
|
||||
(when (seq (:strokes shape))
|
||||
(assoc-in shape [:strokes 0 :stroke-width] value)))))
|
||||
|
||||
(defn update-rotation [value shape-ids]
|
||||
(ptk/reify ::update-shape-dimensions
|
||||
ptk/WatchEvent
|
||||
(watch [_ _ _]
|
||||
(rx/of
|
||||
(udw/trigger-bounding-box-cloaking shape-ids)
|
||||
(udw/increase-rotation shape-ids value)))))
|
||||
|
||||
(defn update-layout-spacing-column [value shape-ids]
|
||||
(ptk/reify ::update-layout-spacing-column
|
||||
ptk/WatchEvent
|
||||
(watch [_ state _]
|
||||
(rx/concat
|
||||
(for [shape-id shape-ids]
|
||||
(let [shape (dt/get-shape-from-state shape-id state)
|
||||
layout-direction (:layout-flex-dir shape)
|
||||
layout-update (if (or (= layout-direction :row-reverse) (= layout-direction :row))
|
||||
{:layout-gap {:column-gap value}}
|
||||
{:layout-gap {:row-gap value}})]
|
||||
(dwsl/update-layout [shape-id] layout-update)))))))
|
||||
|
||||
;; Events ----------------------------------------------------------------------
|
||||
|
||||
(defn apply-token
|
||||
|
|
@ -212,104 +154,3 @@
|
|||
(let [all-tokens (deref refs/workspace-tokens)
|
||||
transformed-tokens-json (transform-tokens-into-json-format all-tokens)]
|
||||
(export-tokens-file transformed-tokens-json)))
|
||||
|
||||
;; Token types -----------------------------------------------------------------
|
||||
|
||||
(def token-types
|
||||
(ordered-map
|
||||
[:border-radius
|
||||
{:title "Border Radius"
|
||||
:attributes ctt/border-radius-keys
|
||||
:on-update-shape update-shape-radius-all
|
||||
:modal {:key :tokens/border-radius
|
||||
:fields [{:label "Border Radius"
|
||||
:key :border-radius}]}}]
|
||||
[:stroke-width
|
||||
{:title "Stroke Width"
|
||||
:attributes ctt/stroke-width-keys
|
||||
:on-update-shape update-stroke-width
|
||||
:modal {:key :tokens/stroke-width
|
||||
:fields [{:label "Stroke Width"
|
||||
:key :stroke-width}]}}]
|
||||
|
||||
[:sizing
|
||||
{:title "Sizing"
|
||||
:attributes #{:width :height}
|
||||
:on-update-shape update-shape-dimensions
|
||||
:modal {:key :tokens/sizing
|
||||
:fields [{:label "Sizing"
|
||||
:key :sizing}]}}]
|
||||
[:dimensions
|
||||
{:title "Dimensions"
|
||||
:attributes #{:width :height}
|
||||
:on-update-shape update-shape-dimensions
|
||||
:modal {:key :tokens/dimensions
|
||||
:fields [{:label "Dimensions"
|
||||
:key :dimensions}]}}]
|
||||
|
||||
[:opacity
|
||||
{:title "Opacity"
|
||||
:attributes ctt/opacity-keys
|
||||
:on-update-shape update-opacity
|
||||
:modal {:key :tokens/opacity
|
||||
:fields [{:label "Opacity"
|
||||
:key :opacity}]}}]
|
||||
|
||||
[:rotation
|
||||
{:title "Rotation"
|
||||
:attributes ctt/rotation-keys
|
||||
:on-update-shape update-rotation
|
||||
:modal {:key :tokens/rotation
|
||||
:fields [{:label "Rotation"
|
||||
:key :rotation}]}}]
|
||||
[:spacing
|
||||
{:title "Spacing"
|
||||
:attributes ctt/spacing-keys
|
||||
:on-update-shape update-layout-spacing-column
|
||||
:modal {:key :tokens/spacing
|
||||
:fields [{:label "Spacing"
|
||||
:key :spacing}]}}]
|
||||
(comment
|
||||
[:boolean
|
||||
{:title "Boolean"
|
||||
:modal {:key :tokens/boolean
|
||||
:fields [{:label "Boolean"}]}}]
|
||||
|
||||
[:box-shadow
|
||||
{:title "Box Shadow"
|
||||
:modal {:key :tokens/box-shadow
|
||||
:fields [{:label "Box shadows"
|
||||
:key :box-shadow
|
||||
:type :box-shadow}]}}]
|
||||
|
||||
[:numeric
|
||||
{:title "Numeric"
|
||||
:modal {:key :tokens/numeric
|
||||
:fields [{:label "Numeric"
|
||||
:key :numeric}]}}]
|
||||
|
||||
[:other
|
||||
{:title "Other"
|
||||
:modal {:key :tokens/other
|
||||
:fields [{:label "Other"
|
||||
:key :other}]}}]
|
||||
[:string
|
||||
{:title "String"
|
||||
:modal {:key :tokens/string
|
||||
:fields [{:label "String"
|
||||
:key :string}]}}]
|
||||
[:typography
|
||||
{:title "Typography"
|
||||
:modal {:key :tokens/typography
|
||||
:fields [{:label "Font" :key :font-family}
|
||||
{:label "Weight" :key :weight}
|
||||
{:label "Font Size" :key :font-size}
|
||||
{:label "Line Height" :key :line-height}
|
||||
{:label "Letter Spacing" :key :letter-spacing}
|
||||
{:label "Paragraph Spacing" :key :paragraph-spacing}
|
||||
{:label "Paragraph Indent" :key :paragraph-indent}
|
||||
{:label "Text Decoration" :key :text-decoration}
|
||||
{:label "Text Case" :key :text-case}]}}])))
|
||||
|
||||
(defn token-attributes [token-type]
|
||||
(get-in token-types [token-type :attributes]))
|
||||
|
|
|
|||
0
frontend/src/app/main/ui/workspace/tokens/core_test.cljs
Normal file
0
frontend/src/app/main/ui/workspace/tokens/core_test.cljs
Normal file
|
|
@ -17,6 +17,7 @@
|
|||
[app.main.ui.workspace.tokens.core :as wtc]
|
||||
[app.main.ui.workspace.tokens.style-dictionary :as sd]
|
||||
[app.main.ui.workspace.tokens.token :as wtt]
|
||||
[app.main.ui.workspace.tokens.token-types :as wtty]
|
||||
[app.util.dom :as dom]
|
||||
[cuerdas.core :as str]
|
||||
[okulary.core :as l]
|
||||
|
|
@ -131,7 +132,7 @@
|
|||
Sort each group alphabetically (by their `:token-key`)."
|
||||
[tokens]
|
||||
(let [tokens-by-type (wtc/group-tokens-by-type tokens)
|
||||
{:keys [empty filled]} (->> wtc/token-types
|
||||
{:keys [empty filled]} (->> wtty/token-types
|
||||
(map (fn [[token-key token-type-props]]
|
||||
{:token-key token-key
|
||||
:token-type-props token-type-props
|
||||
|
|
|
|||
|
|
@ -1,7 +1,13 @@
|
|||
(ns app.main.ui.workspace.tokens.token
|
||||
(:require
|
||||
[cuerdas.core :as str]
|
||||
[clojure.set :as set]))
|
||||
[app.common.data :as d]
|
||||
[clojure.set :as set]
|
||||
[cuerdas.core :as str]))
|
||||
|
||||
(defn resolve-token-value [{:keys [value resolved-value] :as token}]
|
||||
(or
|
||||
resolved-value
|
||||
(d/parse-double value)))
|
||||
|
||||
(defn attributes-map
|
||||
"Creats an attributes map using collection of `attributes` for `id`."
|
||||
|
|
|
|||
104
frontend/src/app/main/ui/workspace/tokens/token_types.cljs
Normal file
104
frontend/src/app/main/ui/workspace/tokens/token_types.cljs
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
(ns app.main.ui.workspace.tokens.token-types
|
||||
(:require
|
||||
[app.common.types.token :as ctt]
|
||||
[app.main.ui.workspace.tokens.changes :as wtch]
|
||||
[app.common.data :as d :refer [ordered-map]]))
|
||||
|
||||
(def token-types
|
||||
(ordered-map
|
||||
[:border-radius
|
||||
{:title "Border Radius"
|
||||
:attributes ctt/border-radius-keys
|
||||
:on-update-shape wtch/update-shape-radius-all
|
||||
:modal {:key :tokens/border-radius
|
||||
:fields [{:label "Border Radius"
|
||||
:key :border-radius}]}}]
|
||||
[:stroke-width
|
||||
{:title "Stroke Width"
|
||||
:attributes ctt/stroke-width-keys
|
||||
:on-update-shape wtch/update-stroke-width
|
||||
:modal {:key :tokens/stroke-width
|
||||
:fields [{:label "Stroke Width"
|
||||
:key :stroke-width}]}}]
|
||||
|
||||
[:sizing
|
||||
{:title "Sizing"
|
||||
:attributes #{:width :height}
|
||||
:on-update-shape wtch/update-shape-dimensions
|
||||
:modal {:key :tokens/sizing
|
||||
:fields [{:label "Sizing"
|
||||
:key :sizing}]}}]
|
||||
[:dimensions
|
||||
{:title "Dimensions"
|
||||
:attributes #{:width :height}
|
||||
:on-update-shape wtch/update-shape-dimensions
|
||||
:modal {:key :tokens/dimensions
|
||||
:fields [{:label "Dimensions"
|
||||
:key :dimensions}]}}]
|
||||
|
||||
[:opacity
|
||||
{:title "Opacity"
|
||||
:attributes ctt/opacity-keys
|
||||
:on-update-shape wtch/update-opacity
|
||||
:modal {:key :tokens/opacity
|
||||
:fields [{:label "Opacity"
|
||||
:key :opacity}]}}]
|
||||
|
||||
[:rotation
|
||||
{:title "Rotation"
|
||||
:attributes ctt/rotation-keys
|
||||
:on-update-shape wtch/update-rotation
|
||||
:modal {:key :tokens/rotation
|
||||
:fields [{:label "Rotation"
|
||||
:key :rotation}]}}]
|
||||
[:spacing
|
||||
{:title "Spacing"
|
||||
:attributes ctt/spacing-keys
|
||||
:on-update-shape wtch/update-layout-spacing-column
|
||||
:modal {:key :tokens/spacing
|
||||
:fields [{:label "Spacing"
|
||||
:key :spacing}]}}]
|
||||
(comment
|
||||
[:boolean
|
||||
{:title "Boolean"
|
||||
:modal {:key :tokens/boolean
|
||||
:fields [{:label "Boolean"}]}}]
|
||||
|
||||
[:box-shadow
|
||||
{:title "Box Shadow"
|
||||
:modal {:key :tokens/box-shadow
|
||||
:fields [{:label "Box shadows"
|
||||
:key :box-shadow
|
||||
:type :box-shadow}]}}]
|
||||
|
||||
[:numeric
|
||||
{:title "Numeric"
|
||||
:modal {:key :tokens/numeric
|
||||
:fields [{:label "Numeric"
|
||||
:key :numeric}]}}]
|
||||
|
||||
[:other
|
||||
{:title "Other"
|
||||
:modal {:key :tokens/other
|
||||
:fields [{:label "Other"
|
||||
:key :other}]}}]
|
||||
[:string
|
||||
{:title "String"
|
||||
:modal {:key :tokens/string
|
||||
:fields [{:label "String"
|
||||
:key :string}]}}]
|
||||
[:typography
|
||||
{:title "Typography"
|
||||
:modal {:key :tokens/typography
|
||||
:fields [{:label "Font" :key :font-family}
|
||||
{:label "Weight" :key :weight}
|
||||
{:label "Font Size" :key :font-size}
|
||||
{:label "Line Height" :key :line-height}
|
||||
{:label "Letter Spacing" :key :letter-spacing}
|
||||
{:label "Paragraph Spacing" :key :paragraph-spacing}
|
||||
{:label "Paragraph Indent" :key :paragraph-indent}
|
||||
{:label "Text Decoration" :key :text-decoration}
|
||||
{:label "Text Case" :key :text-case}]}}])))
|
||||
|
||||
(defn token-attributes [token-type]
|
||||
(get-in token-types [token-type :attributes]))
|
||||
|
|
@ -3,6 +3,7 @@
|
|||
[app.common.test-helpers.compositions :as ctho]
|
||||
[app.common.test-helpers.files :as cthf]
|
||||
[app.common.test-helpers.shapes :as cths]
|
||||
[app.main.ui.workspace.tokens.changes :as wtch]
|
||||
[app.main.ui.workspace.tokens.core :as wtc]
|
||||
[cljs.test :as t :include-macros true]
|
||||
[frontend-tests.helpers.pages :as thp]
|
||||
|
|
@ -36,11 +37,11 @@
|
|||
events [(wtc/apply-token {:shape-ids [(:id rect-1)]
|
||||
:attributes #{:rx :ry}
|
||||
:token (toht/get-token file :token-1)
|
||||
:on-update-shape wtc/update-shape-radius-all})
|
||||
:on-update-shape wtch/update-shape-radius-all})
|
||||
(wtc/apply-token {:shape-ids [(:id rect-1)]
|
||||
:attributes #{:rx :ry}
|
||||
:token (toht/get-token file :token-2)
|
||||
:on-update-shape wtc/update-shape-radius-all})]]
|
||||
:on-update-shape wtch/update-shape-radius-all})]]
|
||||
(tohs/run-store-async
|
||||
store done events
|
||||
(fn [new-state]
|
||||
|
|
@ -64,7 +65,7 @@
|
|||
(wtc/apply-token {:attributes #{:rx :ry :r1 :r2 :r3 :r4}
|
||||
:token (toht/get-token file :token-1)
|
||||
:shape-ids [(:id rect-1)]
|
||||
:on-update-shape wtc/update-shape-radius-all})
|
||||
:on-update-shape wtch/update-shape-radius-all})
|
||||
;; Apply single `:r1` attribute to same shape
|
||||
;; while removing other attributes from the border-radius set
|
||||
;; but keep `:r4` for testing purposes
|
||||
|
|
@ -72,7 +73,7 @@
|
|||
:attributes-to-remove #{:rx :ry :r1 :r2 :r3}
|
||||
:token (toht/get-token file :token-2)
|
||||
:shape-ids [(:id rect-1)]
|
||||
:on-update-shape wtc/update-shape-radius-all})]]
|
||||
:on-update-shape wtch/update-shape-radius-all})]]
|
||||
(tohs/run-store-async
|
||||
store done events
|
||||
(fn [new-state]
|
||||
|
|
@ -97,7 +98,7 @@
|
|||
events [(wtc/apply-token {:shape-ids [(:id rect-1)]
|
||||
:attributes #{:rx :ry}
|
||||
:token (toht/get-token file :token-2)
|
||||
:on-update-shape wtc/update-shape-radius-all})]]
|
||||
:on-update-shape wtch/update-shape-radius-all})]]
|
||||
(tohs/run-store-async
|
||||
store done events
|
||||
(fn [new-state]
|
||||
|
|
@ -123,7 +124,7 @@
|
|||
events [(wtc/apply-token {:shape-ids [(:id rect-1)]
|
||||
:attributes #{:width :height}
|
||||
:token (toht/get-token file :token-target)
|
||||
:on-update-shape wtc/update-shape-dimensions})]]
|
||||
:on-update-shape wtch/update-shape-dimensions})]]
|
||||
(tohs/run-store-async
|
||||
store done events
|
||||
(fn [new-state]
|
||||
|
|
@ -149,7 +150,7 @@
|
|||
events [(wtc/apply-token {:shape-ids [(:id rect-1)]
|
||||
:attributes #{:width :height}
|
||||
:token (toht/get-token file :token-target)
|
||||
:on-update-shape wtc/update-shape-dimensions})]]
|
||||
:on-update-shape wtch/update-shape-dimensions})]]
|
||||
(tohs/run-store-async
|
||||
store done events
|
||||
(fn [new-state]
|
||||
|
|
@ -175,7 +176,7 @@
|
|||
events [(wtc/apply-token {:shape-ids [(:id rect-1)]
|
||||
:attributes #{:opacity}
|
||||
:token (toht/get-token file :token-target)
|
||||
:on-update-shape wtc/update-opacity})]]
|
||||
:on-update-shape wtch/update-opacity})]]
|
||||
(tohs/run-store-async
|
||||
store done events
|
||||
(fn [new-state]
|
||||
|
|
@ -200,7 +201,7 @@
|
|||
events [(wtc/apply-token {:shape-ids [(:id rect-1)]
|
||||
:attributes #{:rotation}
|
||||
:token (toht/get-token file :token-target)
|
||||
:on-update-shape wtc/update-rotation})]]
|
||||
:on-update-shape wtch/update-rotation})]]
|
||||
(tohs/run-store-async
|
||||
store done events
|
||||
(fn [new-state]
|
||||
|
|
@ -221,7 +222,7 @@
|
|||
rect-2 (cths/get-shape file :rect-2)
|
||||
events [(wtc/toggle-token {:shapes [rect-1 rect-2]
|
||||
:token-type-props {:attributes #{:rx :ry}
|
||||
:on-update-shape wtc/update-shape-radius-all}
|
||||
:on-update-shape wtch/update-shape-radius-all}
|
||||
:token (toht/get-token file :token-2)})]]
|
||||
(tohs/run-store-async
|
||||
store done events
|
||||
|
|
|
|||
Loading…
Reference in a new issue