mirror of
https://github.com/penpot/penpot.git
synced 2025-05-30 13:36:14 +02:00
🚧 Tokens (part4) (#5952)
* ✨ Use reduce-kv for creating tokens tree Instead of reduce * ⚡ Avoid double iteration on spliting text shapes from shapes On processing color changes * ♻️ Move the undo transaction out of transform-fill The undo transaction is a high level construct and it should be called from the first level events. Low level impl should not handle transactions at all * ⚡ Use low-level primitives for update-fill token event * 📎 Add performance logging for style dictionary resolution * 📎 Replace inline code with a helper * ♻️ Refactor how fill and stroke color is applied on tokens * 💄 Fix call convention for component-item-thumbnail component * ✨ Clean component thumbnail when frame change received * 📎 Fix tests --------- Co-authored-by: Eva Marco <evamarcod@gmail.com>
This commit is contained in:
parent
65c6c821e7
commit
c9a8d2bd23
13 changed files with 236 additions and 162 deletions
|
@ -200,7 +200,7 @@
|
||||||
result))))
|
result))))
|
||||||
|
|
||||||
(defn get-parent-seq
|
(defn get-parent-seq
|
||||||
"Returns a vector of parents of the specified shape."
|
"Returns a lazy seq of parents of the specified shape."
|
||||||
([objects shape-id]
|
([objects shape-id]
|
||||||
(get-parent-seq objects (get objects shape-id) shape-id))
|
(get-parent-seq objects (get objects shape-id) shape-id))
|
||||||
|
|
||||||
|
|
|
@ -118,10 +118,10 @@
|
||||||
(def valid-color?
|
(def valid-color?
|
||||||
(sm/lazy-validator schema:color))
|
(sm/lazy-validator schema:color))
|
||||||
|
|
||||||
(def check-color!
|
(def check-color
|
||||||
(sm/check-fn schema:color :hint "expected valid color struct"))
|
(sm/check-fn schema:color :hint "expected valid color struct"))
|
||||||
|
|
||||||
(def check-recent-color!
|
(def check-recent-color
|
||||||
(sm/check-fn schema:recent-color))
|
(sm/check-fn schema:recent-color))
|
||||||
|
|
||||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||||
|
|
|
@ -148,7 +148,7 @@
|
||||||
|
|
||||||
(sm/register! ::stroke schema:stroke)
|
(sm/register! ::stroke schema:stroke)
|
||||||
|
|
||||||
(def check-stroke!
|
(def check-stroke
|
||||||
(sm/check-fn schema:stroke))
|
(sm/check-fn schema:stroke))
|
||||||
|
|
||||||
(def schema:shape-base-attrs
|
(def schema:shape-base-attrs
|
||||||
|
|
|
@ -28,5 +28,5 @@
|
||||||
|
|
||||||
(sm/register! ::shadow schema:shadow)
|
(sm/register! ::shadow schema:shadow)
|
||||||
|
|
||||||
(def check-shadow!
|
(def check-shadow
|
||||||
(sm/check-fn schema:shadow))
|
(sm/check-fn schema:shadow))
|
||||||
|
|
|
@ -286,11 +286,10 @@
|
||||||
Optionally use `update-token-fn` option to transform the token."
|
Optionally use `update-token-fn` option to transform the token."
|
||||||
[tokens & {:keys [update-token-fn]
|
[tokens & {:keys [update-token-fn]
|
||||||
:or {update-token-fn identity}}]
|
:or {update-token-fn identity}}]
|
||||||
(reduce
|
(reduce-kv (fn [acc _ token]
|
||||||
(fn [acc [_ token]]
|
(let [path (split-token-path (:name token))]
|
||||||
(let [path (split-token-path (:name token))]
|
(assoc-in acc path (update-token-fn token))))
|
||||||
(assoc-in acc path (update-token-fn token))))
|
{} tokens))
|
||||||
{} tokens))
|
|
||||||
|
|
||||||
(defn backtrace-tokens-tree
|
(defn backtrace-tokens-tree
|
||||||
"Convert tokens into a nested tree with their `:name` as the path.
|
"Convert tokens into a nested tree with their `:name` as the path.
|
||||||
|
|
|
@ -13,8 +13,8 @@
|
||||||
[app.common.schema :as sm]
|
[app.common.schema :as sm]
|
||||||
[app.common.text :as txt]
|
[app.common.text :as txt]
|
||||||
[app.common.types.color :as ctc]
|
[app.common.types.color :as ctc]
|
||||||
[app.common.types.shape :refer [check-stroke!]]
|
[app.common.types.shape :refer [check-stroke]]
|
||||||
[app.common.types.shape.shadow :refer [check-shadow!]]
|
[app.common.types.shape.shadow :refer [check-shadow]]
|
||||||
[app.main.broadcast :as mbc]
|
[app.main.broadcast :as mbc]
|
||||||
[app.main.data.event :as ev]
|
[app.main.data.event :as ev]
|
||||||
[app.main.data.helpers :as dsh]
|
[app.main.data.helpers :as dsh]
|
||||||
|
@ -81,19 +81,45 @@
|
||||||
(assoc-in [:workspace-global :picked-color-select] value)
|
(assoc-in [:workspace-global :picked-color-select] value)
|
||||||
(assoc-in [:workspace-global :picked-shift?] shift?)))))
|
(assoc-in [:workspace-global :picked-shift?] shift?)))))
|
||||||
|
|
||||||
|
|
||||||
|
(defn- split-text-shapes
|
||||||
|
"Split text shapes from non-text shapes"
|
||||||
|
[objects ids]
|
||||||
|
(loop [ids (seq ids)
|
||||||
|
text-ids []
|
||||||
|
shape-ids []]
|
||||||
|
(if-let [id (first ids)]
|
||||||
|
(let [shape (get objects id)]
|
||||||
|
(if (cfh/text-shape? shape)
|
||||||
|
(recur (rest ids)
|
||||||
|
(conj text-ids id)
|
||||||
|
shape-ids)
|
||||||
|
(recur (rest ids)
|
||||||
|
text-ids
|
||||||
|
(conj shape-ids id))))
|
||||||
|
[text-ids shape-ids])))
|
||||||
|
|
||||||
|
(defn assoc-shape-fill
|
||||||
|
[shape position fill]
|
||||||
|
(update shape :fills
|
||||||
|
(fn [fills]
|
||||||
|
(if (nil? fills)
|
||||||
|
[fill]
|
||||||
|
(assoc fills position fill)))))
|
||||||
|
|
||||||
(defn transform-fill
|
(defn transform-fill
|
||||||
([state ids color transform] (transform-fill state ids color transform nil))
|
"A low level function that creates a shape fill transformations stream"
|
||||||
|
([state ids color transform]
|
||||||
|
(transform-fill state ids color transform nil))
|
||||||
([state ids color transform options]
|
([state ids color transform options]
|
||||||
(let [page-id (or (get options :page-id)
|
(let [page-id (or (get options :page-id)
|
||||||
(get state :current-page-id))
|
(get state :current-page-id))
|
||||||
objects (dsh/lookup-page-objects state page-id)
|
objects (dsh/lookup-page-objects state page-id)
|
||||||
is-text? #(= :text (:type (get objects %)))
|
|
||||||
text-ids (filter is-text? ids)
|
|
||||||
shape-ids (remove is-text? ids)
|
|
||||||
|
|
||||||
undo-id (js/Symbol)
|
[text-ids shape-ids]
|
||||||
|
(split-text-shapes objects ids)
|
||||||
|
|
||||||
attrs
|
fill
|
||||||
(cond-> {}
|
(cond-> {}
|
||||||
(contains? color :color)
|
(contains? color :color)
|
||||||
(assoc :fill-color (:color color))
|
(assoc :fill-color (:color color))
|
||||||
|
@ -116,13 +142,12 @@
|
||||||
:always
|
:always
|
||||||
(d/without-nils))
|
(d/without-nils))
|
||||||
|
|
||||||
transform-attrs #(transform % attrs)]
|
transform-attrs #(transform % fill)]
|
||||||
|
|
||||||
(rx/concat
|
(rx/concat
|
||||||
(rx/of (dwu/start-undo-transaction undo-id))
|
(->> (rx/from text-ids)
|
||||||
(rx/from (map #(dwt/update-text-with-function % transform-attrs options) text-ids))
|
(rx/map #(dwt/update-text-with-function % transform-attrs options)))
|
||||||
(rx/of (dwsh/update-shapes shape-ids transform-attrs options))
|
(rx/of (dwsh/update-shapes shape-ids transform-attrs options))))))
|
||||||
(rx/of (dwu/commit-undo-transaction undo-id))))))
|
|
||||||
|
|
||||||
(defn swap-attrs [shape attr index new-index]
|
(defn swap-attrs [shape attr index new-index]
|
||||||
(let [first (get-in shape [attr index])
|
(let [first (get-in shape [attr index])
|
||||||
|
@ -154,12 +179,12 @@
|
||||||
(ptk/reify ::change-fill
|
(ptk/reify ::change-fill
|
||||||
ptk/WatchEvent
|
ptk/WatchEvent
|
||||||
(watch [_ state _]
|
(watch [_ state _]
|
||||||
(let [change-fn (fn [shape attrs]
|
(let [change-fn #(assoc-shape-fill %1 position %2)
|
||||||
(-> shape
|
undo-id (js/Symbol)]
|
||||||
(cond-> (not (contains? shape :fills))
|
(rx/concat
|
||||||
(assoc :fills []))
|
(rx/of (dwu/start-undo-transaction undo-id))
|
||||||
(assoc-in [:fills position] (into {} attrs))))]
|
(transform-fill state ids color change-fn options)
|
||||||
(transform-fill state ids color change-fn options))))))
|
(rx/of (dwu/commit-undo-transaction undo-id))))))))
|
||||||
|
|
||||||
(defn change-fill-and-clear
|
(defn change-fill-and-clear
|
||||||
([ids color] (change-fill-and-clear ids color nil))
|
([ids color] (change-fill-and-clear ids color nil))
|
||||||
|
@ -167,68 +192,84 @@
|
||||||
(ptk/reify ::change-fill-and-clear
|
(ptk/reify ::change-fill-and-clear
|
||||||
ptk/WatchEvent
|
ptk/WatchEvent
|
||||||
(watch [_ state _]
|
(watch [_ state _]
|
||||||
(let [set (fn [shape attrs] (assoc shape :fills [attrs]))]
|
(let [change-fn (fn [shape attrs] (assoc shape :fills [attrs]))
|
||||||
(transform-fill state ids color set options))))))
|
undo-id (js/Symbol)]
|
||||||
|
(rx/of (dwu/start-undo-transaction undo-id))
|
||||||
|
(transform-fill state ids color change-fn options)
|
||||||
|
(rx/of (dwu/commit-undo-transaction undo-id)))))))
|
||||||
|
|
||||||
(defn add-fill
|
(defn add-fill
|
||||||
([ids color] (add-fill ids color nil))
|
([ids color] (add-fill ids color nil))
|
||||||
([ids color options]
|
([ids color options]
|
||||||
|
|
||||||
(dm/assert!
|
(assert
|
||||||
"expected a valid color struct"
|
(ctc/check-color color)
|
||||||
(ctc/check-color! color))
|
"expected a valid color struct")
|
||||||
|
|
||||||
(dm/assert!
|
(assert
|
||||||
"expected a valid coll of uuid's"
|
(every? uuid? ids)
|
||||||
(every? uuid? ids))
|
"expected a valid coll of uuid's")
|
||||||
|
|
||||||
(ptk/reify ::add-fill
|
(ptk/reify ::add-fill
|
||||||
ptk/WatchEvent
|
ptk/WatchEvent
|
||||||
(watch [_ state _]
|
(watch [_ state _]
|
||||||
(let [add (fn [shape attrs]
|
(let [change-fn
|
||||||
(-> shape
|
(fn [shape attrs]
|
||||||
(update :fills #(into [attrs] %))))]
|
(-> shape
|
||||||
(transform-fill state ids color add options))))))
|
(update :fills #(into [attrs] %))))
|
||||||
|
undo-id
|
||||||
|
(js/Symbol)]
|
||||||
|
|
||||||
|
(rx/of (dwu/start-undo-transaction undo-id))
|
||||||
|
(transform-fill state ids color change-fn options)
|
||||||
|
(rx/of (dwu/commit-undo-transaction undo-id)))))))
|
||||||
|
|
||||||
(defn remove-fill
|
(defn remove-fill
|
||||||
([ids color position] (remove-fill ids color position nil))
|
([ids color position] (remove-fill ids color position nil))
|
||||||
([ids color position options]
|
([ids color position options]
|
||||||
|
|
||||||
(dm/assert!
|
(assert (ctc/check-color color)
|
||||||
"expected a valid color struct"
|
"expected a valid color struct")
|
||||||
(ctc/check-color! color))
|
(assert (every? uuid? ids)
|
||||||
|
"expected a valid coll of uuid's")
|
||||||
(dm/assert!
|
|
||||||
"expected a valid coll of uuid's"
|
|
||||||
(every? uuid? ids))
|
|
||||||
|
|
||||||
(ptk/reify ::remove-fill
|
(ptk/reify ::remove-fill
|
||||||
ptk/WatchEvent
|
ptk/WatchEvent
|
||||||
(watch [_ state _]
|
(watch [_ state _]
|
||||||
(let [remove-fill-by-index (fn [values index] (->> (d/enumerate values)
|
(let [remove-fill-by-index
|
||||||
(filterv (fn [[idx _]] (not= idx index)))
|
(fn [values index]
|
||||||
(mapv second)))
|
(->> (d/enumerate values)
|
||||||
|
(filterv (fn [[idx _]] (not= idx index)))
|
||||||
|
(mapv second)))
|
||||||
|
|
||||||
remove (fn [shape _] (update shape :fills remove-fill-by-index position))]
|
change-fn
|
||||||
(transform-fill state ids color remove options))))))
|
(fn [shape _] (update shape :fills remove-fill-by-index position))
|
||||||
|
|
||||||
|
undo-id
|
||||||
|
(js/Symbol)]
|
||||||
|
|
||||||
|
(rx/concat
|
||||||
|
(rx/of (dwu/start-undo-transaction undo-id))
|
||||||
|
(transform-fill state ids color change-fn options)
|
||||||
|
(rx/of (dwu/commit-undo-transaction undo-id))))))))
|
||||||
|
|
||||||
(defn remove-all-fills
|
(defn remove-all-fills
|
||||||
([ids color] (remove-all-fills ids color nil))
|
([ids color] (remove-all-fills ids color nil))
|
||||||
([ids color options]
|
([ids color options]
|
||||||
|
|
||||||
(dm/assert!
|
(assert (ctc/check-color color) "expected a valid color struct")
|
||||||
"expected a valid color struct"
|
(assert (every? uuid? ids) "expected a valid coll of uuid's")
|
||||||
(ctc/check-color! color))
|
|
||||||
|
|
||||||
(dm/assert!
|
|
||||||
"expected a valid coll of uuid's"
|
|
||||||
(every? uuid? ids))
|
|
||||||
|
|
||||||
(ptk/reify ::remove-all-fills
|
(ptk/reify ::remove-all-fills
|
||||||
ptk/WatchEvent
|
ptk/WatchEvent
|
||||||
(watch [_ state _]
|
(watch [_ state _]
|
||||||
(let [remove-all (fn [shape _] (assoc shape :fills []))]
|
(let [change-fn (fn [shape _] (assoc shape :fills []))
|
||||||
(transform-fill state ids color remove-all options))))))
|
undo-id (js/Symbol)]
|
||||||
|
(rx/concat
|
||||||
|
(rx/of (dwu/start-undo-transaction undo-id))
|
||||||
|
(transform-fill state ids color change-fn options)
|
||||||
|
(rx/of (dwu/commit-undo-transaction undo-id))))))))
|
||||||
|
|
||||||
(defn change-hide-fill-on-export
|
(defn change-hide-fill-on-export
|
||||||
[ids hide-fill-on-export]
|
[ids hide-fill-on-export]
|
||||||
|
@ -252,6 +293,8 @@
|
||||||
:stroke-cap-start
|
:stroke-cap-start
|
||||||
:stroke-cap-end])
|
:stroke-cap-end])
|
||||||
|
|
||||||
|
;; FIXME: this function initializes an empty stroke, maybe we can move
|
||||||
|
;; it to common.types
|
||||||
(defn- build-stroke-style-attrs
|
(defn- build-stroke-style-attrs
|
||||||
[stroke]
|
[stroke]
|
||||||
(let [attrs (select-keys stroke stroke-style-attrs)]
|
(let [attrs (select-keys stroke stroke-style-attrs)]
|
||||||
|
@ -268,6 +311,40 @@
|
||||||
:always
|
:always
|
||||||
(d/without-nils))))
|
(d/without-nils))))
|
||||||
|
|
||||||
|
(defn update-shape-stroke-color
|
||||||
|
"Given a shape, update color attributes on the stroke on the specified
|
||||||
|
`position`; if no stroke is found a new empty stroke is created."
|
||||||
|
[shape position color]
|
||||||
|
(update shape :strokes
|
||||||
|
(fn [strokes]
|
||||||
|
(let [stroke (if (nil? strokes)
|
||||||
|
(build-stroke-style-attrs nil)
|
||||||
|
(build-stroke-style-attrs (get strokes position)))
|
||||||
|
stroke (cond-> (build-stroke-style-attrs stroke)
|
||||||
|
(contains? color :color)
|
||||||
|
(assoc :stroke-color (:color color))
|
||||||
|
|
||||||
|
(contains? color :id)
|
||||||
|
(assoc :stroke-color-ref-id (:id color))
|
||||||
|
|
||||||
|
(contains? color :file-id)
|
||||||
|
(assoc :stroke-color-ref-file (:file-id color))
|
||||||
|
|
||||||
|
(contains? color :gradient)
|
||||||
|
(assoc :stroke-color-gradient (:gradient color))
|
||||||
|
|
||||||
|
(contains? color :opacity)
|
||||||
|
(assoc :stroke-opacity (:opacity color))
|
||||||
|
|
||||||
|
(contains? color :image)
|
||||||
|
(assoc :stroke-image (:image color))
|
||||||
|
|
||||||
|
:always
|
||||||
|
(d/without-nils))]
|
||||||
|
(if (nil? strokes)
|
||||||
|
[stroke]
|
||||||
|
(assoc strokes position stroke))))))
|
||||||
|
|
||||||
(defn change-stroke-color
|
(defn change-stroke-color
|
||||||
([ids color index] (change-stroke-color ids color index nil))
|
([ids color index] (change-stroke-color ids color index nil))
|
||||||
([ids color index options]
|
([ids color index options]
|
||||||
|
@ -275,38 +352,7 @@
|
||||||
ptk/WatchEvent
|
ptk/WatchEvent
|
||||||
(watch [_ _ _]
|
(watch [_ _ _]
|
||||||
(rx/of (let [options (assoc options :changed-sub-attr [:stroke-color])]
|
(rx/of (let [options (assoc options :changed-sub-attr [:stroke-color])]
|
||||||
(dwsh/update-shapes
|
(dwsh/update-shapes ids #(update-shape-stroke-color % index color) options)))))))
|
||||||
ids
|
|
||||||
(fn [shape]
|
|
||||||
(let [stroke (get-in shape [:strokes index])
|
|
||||||
attrs (cond-> (build-stroke-style-attrs stroke)
|
|
||||||
(contains? color :color)
|
|
||||||
(assoc :stroke-color (:color color))
|
|
||||||
|
|
||||||
(contains? color :id)
|
|
||||||
(assoc :stroke-color-ref-id (:id color))
|
|
||||||
|
|
||||||
(contains? color :file-id)
|
|
||||||
(assoc :stroke-color-ref-file (:file-id color))
|
|
||||||
|
|
||||||
(contains? color :gradient)
|
|
||||||
(assoc :stroke-color-gradient (:gradient color))
|
|
||||||
|
|
||||||
(contains? color :opacity)
|
|
||||||
(assoc :stroke-opacity (:opacity color))
|
|
||||||
|
|
||||||
(contains? color :image)
|
|
||||||
(assoc :stroke-image (:image color))
|
|
||||||
|
|
||||||
:always
|
|
||||||
(d/without-nils))]
|
|
||||||
(cond-> shape
|
|
||||||
(not (contains? shape :strokes))
|
|
||||||
(assoc :strokes [])
|
|
||||||
|
|
||||||
:always
|
|
||||||
(assoc-in [:strokes index] attrs))))
|
|
||||||
options)))))))
|
|
||||||
|
|
||||||
(defn change-stroke-attrs
|
(defn change-stroke-attrs
|
||||||
([ids attrs index] (change-stroke-attrs ids attrs index nil))
|
([ids attrs index] (change-stroke-attrs ids attrs index nil))
|
||||||
|
@ -354,13 +400,13 @@
|
||||||
(defn add-shadow
|
(defn add-shadow
|
||||||
[ids shadow]
|
[ids shadow]
|
||||||
|
|
||||||
(dm/assert!
|
(assert
|
||||||
"expected a valid shadow struct"
|
(check-shadow shadow)
|
||||||
(check-shadow! shadow))
|
"expected a valid shadow struct")
|
||||||
|
|
||||||
(dm/assert!
|
(assert
|
||||||
"expected a valid coll of uuid's"
|
(every? uuid? ids)
|
||||||
(every? uuid? ids))
|
"expected a valid coll of uuid's")
|
||||||
|
|
||||||
(ptk/reify ::add-shadow
|
(ptk/reify ::add-shadow
|
||||||
ptk/WatchEvent
|
ptk/WatchEvent
|
||||||
|
@ -372,13 +418,14 @@
|
||||||
(defn add-stroke
|
(defn add-stroke
|
||||||
[ids stroke]
|
[ids stroke]
|
||||||
|
|
||||||
(dm/assert!
|
(assert
|
||||||
"expected a valid stroke struct"
|
(check-stroke stroke)
|
||||||
(check-stroke! stroke))
|
"expected a valid stroke struct")
|
||||||
|
|
||||||
|
(assert
|
||||||
|
(every? uuid? ids)
|
||||||
|
"expected a valid coll of uuid's")
|
||||||
|
|
||||||
(dm/assert!
|
|
||||||
"expected a valid coll of uuid's"
|
|
||||||
(every? uuid? ids))
|
|
||||||
|
|
||||||
(ptk/reify ::add-stroke
|
(ptk/reify ::add-stroke
|
||||||
ptk/WatchEvent
|
ptk/WatchEvent
|
||||||
|
@ -391,9 +438,9 @@
|
||||||
(defn remove-stroke
|
(defn remove-stroke
|
||||||
[ids position]
|
[ids position]
|
||||||
|
|
||||||
(dm/assert!
|
(assert
|
||||||
"expected a valid coll of uuid's"
|
(every? uuid? ids)
|
||||||
(every? uuid? ids))
|
"expected a valid coll of uuid's")
|
||||||
|
|
||||||
(ptk/reify ::remove-stroke
|
(ptk/reify ::remove-stroke
|
||||||
ptk/WatchEvent
|
ptk/WatchEvent
|
||||||
|
@ -411,9 +458,10 @@
|
||||||
(defn remove-all-strokes
|
(defn remove-all-strokes
|
||||||
[ids]
|
[ids]
|
||||||
|
|
||||||
(dm/assert!
|
(assert
|
||||||
"expected a valid coll of uuid's"
|
(every? uuid? ids)
|
||||||
(every? uuid? ids))
|
"expected a valid coll of uuid's")
|
||||||
|
|
||||||
|
|
||||||
(ptk/reify ::remove-all-strokes
|
(ptk/reify ::remove-all-strokes
|
||||||
ptk/WatchEvent
|
ptk/WatchEvent
|
||||||
|
@ -508,23 +556,22 @@
|
||||||
(def ^:private schema:change-color-operations
|
(def ^:private schema:change-color-operations
|
||||||
[:vector schema:change-color-operation])
|
[:vector schema:change-color-operation])
|
||||||
|
|
||||||
(def ^:private check-change-color-operations!
|
(def ^:private check-change-color-operations
|
||||||
(sm/check-fn schema:change-color-operations))
|
(sm/check-fn schema:change-color-operations))
|
||||||
|
|
||||||
(defn change-color-in-selected
|
(defn change-color-in-selected
|
||||||
[operations new-color old-color]
|
[operations new-color old-color]
|
||||||
|
|
||||||
(dm/assert!
|
(assert (check-change-color-operations operations)
|
||||||
"expected valid color operations"
|
"expected valid color operations")
|
||||||
(check-change-color-operations! operations))
|
|
||||||
|
|
||||||
(dm/assert!
|
(assert
|
||||||
"expected valid color structure"
|
(ctc/check-color new-color)
|
||||||
(ctc/check-color! new-color))
|
"expected valid color structure")
|
||||||
|
|
||||||
(dm/assert!
|
(assert
|
||||||
"expected valid color structure"
|
(ctc/check-color old-color)
|
||||||
(ctc/check-color! old-color))
|
"expected valid color structure")
|
||||||
|
|
||||||
(ptk/reify ::change-color-in-selected
|
(ptk/reify ::change-color-in-selected
|
||||||
ptk/WatchEvent
|
ptk/WatchEvent
|
||||||
|
@ -546,9 +593,9 @@
|
||||||
(defn apply-color-from-palette
|
(defn apply-color-from-palette
|
||||||
[color stroke?]
|
[color stroke?]
|
||||||
|
|
||||||
(dm/assert!
|
(assert
|
||||||
"expected valid color structure"
|
(ctc/check-color color)
|
||||||
(ctc/check-color! color))
|
"expected valid color structure")
|
||||||
|
|
||||||
(ptk/reify ::apply-color-from-palette
|
(ptk/reify ::apply-color-from-palette
|
||||||
ptk/WatchEvent
|
ptk/WatchEvent
|
||||||
|
@ -585,9 +632,8 @@
|
||||||
(defn apply-color-from-colorpicker
|
(defn apply-color-from-colorpicker
|
||||||
[color]
|
[color]
|
||||||
|
|
||||||
(dm/assert!
|
(assert (ctc/check-color color)
|
||||||
"expected valid color structure"
|
"expected valid color structure")
|
||||||
(ctc/check-color! color))
|
|
||||||
|
|
||||||
(ptk/reify ::apply-color-from-colorpicker
|
(ptk/reify ::apply-color-from-colorpicker
|
||||||
ptk/UpdateEvent
|
ptk/UpdateEvent
|
||||||
|
|
|
@ -123,7 +123,7 @@
|
||||||
|
|
||||||
(dm/assert!
|
(dm/assert!
|
||||||
"expect valid color structure"
|
"expect valid color structure"
|
||||||
(ctc/check-color! color))
|
(ctc/check-color color))
|
||||||
|
|
||||||
(ptk/reify ::add-color
|
(ptk/reify ::add-color
|
||||||
ev/Event
|
ev/Event
|
||||||
|
@ -140,10 +140,8 @@
|
||||||
|
|
||||||
(defn add-recent-color
|
(defn add-recent-color
|
||||||
[color]
|
[color]
|
||||||
|
(assert (ctc/check-recent-color color)
|
||||||
(dm/assert!
|
"expected valid recent color structure")
|
||||||
"expected valid recent color structure"
|
|
||||||
(ctc/check-recent-color! color))
|
|
||||||
|
|
||||||
(ptk/reify ::add-recent-color
|
(ptk/reify ::add-recent-color
|
||||||
ptk/UpdateEvent
|
ptk/UpdateEvent
|
||||||
|
@ -182,7 +180,7 @@
|
||||||
|
|
||||||
(dm/assert!
|
(dm/assert!
|
||||||
"expected valid color data structure"
|
"expected valid color data structure"
|
||||||
(ctc/check-color! color))
|
(ctc/check-color color))
|
||||||
|
|
||||||
(dm/assert!
|
(dm/assert!
|
||||||
"expected file-id"
|
"expected file-id"
|
||||||
|
@ -200,7 +198,7 @@
|
||||||
|
|
||||||
(dm/assert!
|
(dm/assert!
|
||||||
"expected valid color data structure"
|
"expected valid color data structure"
|
||||||
(ctc/check-color! color))
|
(ctc/check-color color))
|
||||||
|
|
||||||
(dm/assert!
|
(dm/assert!
|
||||||
"expected file-id"
|
"expected file-id"
|
||||||
|
|
|
@ -282,8 +282,9 @@
|
||||||
;; and interrupt any ongoing update-thumbnail process
|
;; and interrupt any ongoing update-thumbnail process
|
||||||
;; related to current frame-id
|
;; related to current frame-id
|
||||||
(->> all-commits-s
|
(->> all-commits-s
|
||||||
(rx/map (fn [frame-id]
|
(rx/mapcat (fn [frame-id]
|
||||||
(clear-thumbnail file-id page-id frame-id "frame"))))
|
(rx/of (clear-thumbnail file-id page-id frame-id "frame")
|
||||||
|
(clear-thumbnail file-id page-id frame-id "component")))))
|
||||||
|
|
||||||
;; Generate thumbnails in batches, once user becomes
|
;; Generate thumbnails in batches, once user becomes
|
||||||
;; inactive for some instant.
|
;; inactive for some instant.
|
||||||
|
|
|
@ -282,9 +282,8 @@
|
||||||
(:id target-asset)
|
(:id target-asset)
|
||||||
(cfh/merge-path-item prefix (:name target-asset))))))))
|
(cfh/merge-path-item prefix (:name target-asset))))))))
|
||||||
|
|
||||||
(mf/defc component-item-thumbnail
|
(mf/defc component-item-thumbnail*
|
||||||
"Component that renders the thumbnail image or the original SVG."
|
"Component that renders the thumbnail image or the original SVG."
|
||||||
{::mf/props :obj}
|
|
||||||
[{:keys [file-id root-shape component container class is-hidden]}]
|
[{:keys [file-id root-shape component container class is-hidden]}]
|
||||||
(let [page-id (:main-instance-page component)
|
(let [page-id (:main-instance-page component)
|
||||||
root-id (:main-instance-id component)
|
root-id (:main-instance-id component)
|
||||||
|
|
|
@ -158,13 +158,14 @@
|
||||||
(when ^boolean dragging?
|
(when ^boolean dragging?
|
||||||
[:div {:class (stl/css :dragging)}])]
|
[:div {:class (stl/css :dragging)}])]
|
||||||
|
|
||||||
[:& cmm/component-item-thumbnail {:file-id file-id
|
[:> cmm/component-item-thumbnail*
|
||||||
:class (stl/css-case :thumbnail true
|
{:file-id file-id
|
||||||
:asset-list-thumbnail (not listing-thumbs?))
|
:class (stl/css-case :thumbnail true
|
||||||
:root-shape root-shape
|
:asset-list-thumbnail (not listing-thumbs?))
|
||||||
:component component
|
:root-shape root-shape
|
||||||
:container container
|
:component component
|
||||||
:is-hidden (not visible?)}]])]))
|
:container container
|
||||||
|
:is-hidden (not visible?)}]])]))
|
||||||
|
|
||||||
(mf/defc components-group
|
(mf/defc components-group
|
||||||
{::mf/wrap-props false}
|
{::mf/wrap-props false}
|
||||||
|
|
|
@ -322,10 +322,11 @@
|
||||||
:key (str "swap-item-" (:id item))
|
:key (str "swap-item-" (:id item))
|
||||||
:on-click on-select}
|
:on-click on-select}
|
||||||
(when visible?
|
(when visible?
|
||||||
[:& cmm/component-item-thumbnail {:file-id (:file-id item)
|
[:> cmm/component-item-thumbnail*
|
||||||
:root-shape root-shape
|
{:file-id (:file-id item)
|
||||||
:component item
|
:root-shape root-shape
|
||||||
:container container}])
|
:component item
|
||||||
|
:container container}])
|
||||||
[:span {:class (stl/css-case :component-name true
|
[:span {:class (stl/css-case :component-name true
|
||||||
:selected (= (:id item) component-id))}
|
:selected (= (:id item) component-id))}
|
||||||
(if is-search (:full-name item) (:name item))]]))
|
(if is-search (:full-name item) (:name item))]]))
|
||||||
|
|
|
@ -170,18 +170,42 @@
|
||||||
(f shape-ids {:color hex :opacity opacity} 0 {:ignore-touched true
|
(f shape-ids {:color hex :opacity opacity} 0 {:ignore-touched true
|
||||||
:page-id page-id}))))
|
:page-id page-id}))))
|
||||||
|
|
||||||
|
(defn- value->color
|
||||||
|
"Transform a token color value into penpot color data structure"
|
||||||
|
[color]
|
||||||
|
(when-let [tc (tinycolor/valid-color color)]
|
||||||
|
(let [hex (tinycolor/->hex-string tc)
|
||||||
|
opacity (tinycolor/alpha tc)]
|
||||||
|
{:color hex :opacity opacity})))
|
||||||
|
|
||||||
(defn update-fill
|
(defn update-fill
|
||||||
([value shape-ids attributes] (update-fill value shape-ids attributes nil))
|
([value shape-ids attributes]
|
||||||
([value shape-ids _attributes page-id] ; The attributes param is needed to have the same arity that other update functions
|
(update-fill value shape-ids attributes nil))
|
||||||
(update-color wdc/change-fill value shape-ids page-id)))
|
([value shape-ids _attributes page-id] ;; The attributes param is needed to have the same arity that other update functions
|
||||||
|
(ptk/reify ::update-fill
|
||||||
|
ptk/WatchEvent
|
||||||
|
(watch [_ state _]
|
||||||
|
(when-let [color (value->color value)]
|
||||||
|
(let [update-fn #(wdc/assoc-shape-fill %1 0 %2)]
|
||||||
|
(wdc/transform-fill state shape-ids color update-fn {:ignore-touched true
|
||||||
|
:page-id page-id})))))))
|
||||||
|
|
||||||
(defn update-stroke-color
|
(defn update-stroke-color
|
||||||
([value shape-ids attributes] (update-stroke-color value shape-ids attributes nil))
|
([value shape-ids attributes]
|
||||||
([value shape-ids _attributes page-id] ; The attributes param is needed to have the same arity that other update functions
|
(update-stroke-color value shape-ids attributes nil))
|
||||||
(update-color wdc/change-stroke-color value shape-ids page-id)))
|
|
||||||
|
;; The attributes param is needed to have the same arity that other update functions
|
||||||
|
([value shape-ids _attributes page-id]
|
||||||
|
(when-let [color (value->color value)]
|
||||||
|
(dwsh/update-shapes shape-ids
|
||||||
|
#(wdc/update-shape-stroke-color % 0 color)
|
||||||
|
{:page-id page-id
|
||||||
|
:ignore-touched true
|
||||||
|
:changed-sub-attr [:stroke-color]}))))
|
||||||
|
|
||||||
(defn update-fill-stroke
|
(defn update-fill-stroke
|
||||||
([value shape-ids attributes] (update-fill-stroke value shape-ids attributes nil))
|
([value shape-ids attributes]
|
||||||
|
(update-fill-stroke value shape-ids attributes nil))
|
||||||
([value shape-ids attributes page-id]
|
([value shape-ids attributes page-id]
|
||||||
(ptk/reify ::update-fill-stroke
|
(ptk/reify ::update-fill-stroke
|
||||||
ptk/WatchEvent
|
ptk/WatchEvent
|
||||||
|
|
|
@ -10,12 +10,13 @@
|
||||||
[app.main.ui.workspace.tokens.token :as wtt]
|
[app.main.ui.workspace.tokens.token :as wtt]
|
||||||
[app.main.ui.workspace.tokens.warnings :as wtw]
|
[app.main.ui.workspace.tokens.warnings :as wtw]
|
||||||
[app.util.i18n :refer [tr]]
|
[app.util.i18n :refer [tr]]
|
||||||
|
[app.util.time :as dt]
|
||||||
[beicon.v2.core :as rx]
|
[beicon.v2.core :as rx]
|
||||||
[cuerdas.core :as str]
|
[cuerdas.core :as str]
|
||||||
[promesa.core :as p]
|
[promesa.core :as p]
|
||||||
[rumext.v2 :as mf]))
|
[rumext.v2 :as mf]))
|
||||||
|
|
||||||
(l/set-level! "app.main.ui.workspace.tokens.style-dictionary" :warn)
|
(l/set-level! :debug)
|
||||||
|
|
||||||
;; === Style Dictionary
|
;; === Style Dictionary
|
||||||
|
|
||||||
|
@ -158,9 +159,10 @@
|
||||||
config)
|
config)
|
||||||
|
|
||||||
(build-dictionary [_]
|
(build-dictionary [_]
|
||||||
(-> (sd. (clj->js config))
|
(let [config' (clj->js config)]
|
||||||
(.buildAllPlatforms "json")
|
(-> (sd. config')
|
||||||
(p/then #(.-allTokens ^js %)))))
|
(.buildAllPlatforms "json")
|
||||||
|
(p/then #(.-allTokens ^js %))))))
|
||||||
|
|
||||||
(defn resolve-tokens-tree+
|
(defn resolve-tokens-tree+
|
||||||
([tokens-tree get-token]
|
([tokens-tree get-token]
|
||||||
|
@ -302,11 +304,14 @@
|
||||||
(let [state* (mf/use-state tokens)]
|
(let [state* (mf/use-state tokens)]
|
||||||
(mf/with-effect [tokens interactive?]
|
(mf/with-effect [tokens interactive?]
|
||||||
(when (seq tokens)
|
(when (seq tokens)
|
||||||
(let [promise (if interactive?
|
(let [tpoint (dt/tpoint-ms)
|
||||||
|
promise (if interactive?
|
||||||
(resolve-tokens-interactive+ tokens)
|
(resolve-tokens-interactive+ tokens)
|
||||||
(resolve-tokens+ tokens))]
|
(resolve-tokens+ tokens))]
|
||||||
|
|
||||||
(->> promise
|
(->> promise
|
||||||
(p/fmap (fn [resolved-tokens]
|
(p/fmap (fn [resolved-tokens]
|
||||||
(reset! state* resolved-tokens)))))))
|
(let [elapsed (tpoint)]
|
||||||
|
(l/dbg :hint "use-resolved-tokens*" :elapsed elapsed)
|
||||||
|
(reset! state* resolved-tokens))))))))
|
||||||
@state*))
|
@state*))
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue