From 773debafdaf71345b466e876f4a1f8cb0d164eed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Florian=20Schr=C3=B6dl?= Date: Thu, 30 Jan 2025 12:54:19 +0100 Subject: [PATCH] :bug: Fix border-radius applied to all corners on token update (#5697) --- common/src/app/common/types/shape/radius.cljc | 8 ++++ .../app/main/ui/workspace/tokens/changes.cljs | 10 ++--- .../ui/workspace/tokens/context_menu.cljs | 8 +++- .../app/main/ui/workspace/tokens/update.cljs | 2 +- .../tokens/logic/token_actions_test.cljs | 43 +++++++++++++++++++ 5 files changed, 62 insertions(+), 9 deletions(-) diff --git a/common/src/app/common/types/shape/radius.cljc b/common/src/app/common/types/shape/radius.cljc index d125fd3295..8cf8174337 100644 --- a/common/src/app/common/types/shape/radius.cljc +++ b/common/src/app/common/types/shape/radius.cljc @@ -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)) diff --git a/frontend/src/app/main/ui/workspace/tokens/changes.cljs b/frontend/src/app/main/ui/workspace/tokens/changes.cljs index e9328fed16..688d528df2 100644 --- a/frontend/src/app/main/ui/workspace/tokens/changes.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/changes.cljs @@ -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})) diff --git a/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs b/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs index ecdab10e58..9961ea407c 100644 --- a/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/context_menu.cljs @@ -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))]) diff --git a/frontend/src/app/main/ui/workspace/tokens/update.cljs b/frontend/src/app/main/ui/workspace/tokens/update.cljs index 15a417cd2d..4af49340de 100644 --- a/frontend/src/app/main/ui/workspace/tokens/update.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/update.cljs @@ -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 diff --git a/frontend/test/frontend_tests/tokens/logic/token_actions_test.cljs b/frontend/test/frontend_tests/tokens/logic/token_actions_test.cljs index e3200c7c8e..b58a271048 100644 --- a/frontend/test/frontend_tests/tokens/logic/token_actions_test.cljs +++ b/frontend/test/frontend_tests/tokens/logic/token_actions_test.cljs @@ -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