Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-04-16 00:41:25 -05:00
Code Issues Activity

🐛 Fix border-radius applied to all corners on token update ()

Browse source
This commit is contained in:
Florian Schrödl 2025-01-30 12:54:19 +01:00 • committed by GitHub
parent 4524d6c216
commit 773debafda
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 62 additions and 9 deletions
common/src/app/common/types/shape
radius.cljc
frontend
src/app/main/ui/workspace/tokens
changes.cljscontext_menu.cljsupdate.cljs
test/frontend_tests/tokens/logic
token_actions_test.cljs

8
common/src/app/common/types/shape/radius.cljc
View file

@ -56,3 +56,11 @@
(cond-> shape
(can-get-border-radius? shape)
(assoc attr value))))
(defn set-radius-for-corners
"Set border radius to `value` for each radius `attr`."
[shape attrs value]
(reduce
(fn [shape' attr]
(set-radius-to-single-corner shape' attr value))
shape attrs))

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

@ -97,19 +97,15 @@
(defn update-shape-radius-all [value shape-ids]
(dwsh/update-shapes shape-ids
(fn [shape]
(when (ctsr/can-get-border-radius? shape)
(ctsr/set-radius-to-all-corners shape value)))
(ctsr/set-radius-to-all-corners shape value))
{:reg-objects? true
:ignore-touched true
:attrs ctt/border-radius-keys}))
(defn update-shape-radius-single-corner [value shape-ids attributes]
;; NOTE: This key should be namespaced on data tokens, but these events are not there.
(st/emit! (ptk/data-event :expand-border-radius))
(defn update-shape-radius-for-corners [value shape-ids attributes]
(dwsh/update-shapes shape-ids
(fn [shape]
(when (ctsr/can-get-border-radius? shape)
(ctsr/set-radius-to-single-corner shape (first attributes) value)))
(ctsr/set-radius-for-corners shape attributes value))
{:reg-objects? true
:ignore-touched true
:attrs ctt/border-radius-keys}))

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

@ -23,6 +23,7 @@
[app.util.i18n :refer [tr]]
[app.util.timers :as timers]
[okulary.core :as l]
[potok.v2.core :as ptk]
[rumext.v2 :as mf]))
;; Actions ---------------------------------------------------------------------
@ -179,6 +180,11 @@
:on-update-shape wtch/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)))
(def shape-attribute-actions-map
(let [stroke-width (partial generic-attribute-actions #{:stroke-width} "Stroke Width")]
{:border-radius (partial all-or-sepearate-actions {:attribute-labels {:r1 "Top Left"
@ -186,7 +192,7 @@
:r4 "Bottom Left"
:r3 "Bottom Right"}
:on-update-shape-all wtch/update-shape-radius-all
:on-update-shape wtch/update-shape-radius-single-corner})
: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))
(generic-attribute-actions #{:stroke-color} "Stroke" (assoc context-data :on-update-shape wtch/update-stroke-color))])

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

@ -17,7 +17,7 @@
(def filter-existing-values? false)
(def attributes->shape-update
{#{:r1 :r2 :r3 :r4} wtch/update-shape-radius-all
{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

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

@ -124,6 +124,49 @@
(t/testing "while :r4 was kept with borderRadius.sm"
(t/is (= (:r4 (:applied-tokens rect-1')) (:name token-sm)))))))))))
(t/deftest test-apply-border-radius
(t/testing "applies border-radius to all and individual corners"
(t/async
done
(let [file (setup-file-with-tokens {:rect-1 {:r1 100 :r2 100}
:rect-2 {:r3 100 :r4 100}})
store (ths/setup-store file)
rect-1 (cths/get-shape file :rect-1)
rect-2 (cths/get-shape file :rect-2)
events [(wtch/apply-token {:shape-ids [(:id rect-1)]
:attributes #{:r3 :r4}
:token (toht/get-token file "borderRadius.sm")
:on-update-shape wtch/update-shape-radius-for-corners})
(wtch/apply-token {:shape-ids [(:id rect-2)]
:attributes #{:r1 :r2 :r3 :r4}
:token (toht/get-token file "borderRadius.sm")
:on-update-shape wtch/update-shape-radius-all})]]
(tohs/run-store-async
store done events
(fn [new-state]
(let [file' (ths/get-file-from-state new-state)
rect-1' (cths/get-shape file' :rect-1)
rect-2' (cths/get-shape file' :rect-2)]
(t/testing "individual corners"
(t/is (nil? (:r1 (:applied-tokens rect-1'))))
(t/is (nil? (:r2 (:applied-tokens rect-1'))))
(t/is (= "borderRadius.sm" (:r3 (:applied-tokens rect-1'))))
(t/is (= "borderRadius.sm" (:r4 (:applied-tokens rect-1'))))
(t/is (= 100 (:r1 rect-1')))
(t/is (= 100 (:r2 rect-1')))
(t/is (= 12 (:r3 rect-1')))
(t/is (= 12 (:r4 rect-1'))))
(t/testing "all corners"
(t/is (= "borderRadius.sm" (:r1 (:applied-tokens rect-2'))))
(t/is (= "borderRadius.sm" (:r2 (:applied-tokens rect-2'))))
(t/is (= "borderRadius.sm" (:r3 (:applied-tokens rect-2'))))
(t/is (= "borderRadius.sm" (:r4 (:applied-tokens rect-2'))))
(t/is (= 12 (:r1 rect-2')))
(t/is (= 12 (:r2 rect-2')))
(t/is (= 12 (:r3 rect-2')))
(t/is (= 12 (:r4 rect-2')))))))))))
(t/deftest test-apply-color
(t/testing "applies color token and updates the shape fill and stroke-color"
(t/async