Add simple token spacing application

common/src/app/common/types/token.cljc

@@ -89,6 +89,8 @@
    [:position-x {:optional true} ::sm/uuid]
    [:position-y {:optional true} ::sm/uuid]])
 
+(def spacing-keys (schema-keys ::spacing))
+
 (sm/def! ::tokens
   [:map {:title "Applied Tokens"}])
 

frontend/src/app/main/ui/workspace/tokens/core.cljs

@@ -10,8 +10,11 @@
    [app.common.types.shape.radius :as ctsr]
    [app.common.types.token :as ctt]
    [app.main.data.workspace.changes :as dch]
+   [app.main.data.workspace.shape-layout :as dwsl]
+   [app.main.data.workspace.state-helpers :as wsh]
    [app.main.data.workspace.transforms :as dwt]
-   [app.main.store :as st]))
+   [app.main.store :as st]
+   [beicon.v2.core :as rx]))
 
 ;; Helpers ---------------------------------------------------------------------
 
@@ -45,6 +48,11 @@
    (dwt/update-dimensions shape-ids :width value)
    (dwt/update-dimensions shape-ids :height value)))
 
+(defn update-layout-spacing-column [value shape-ids]
+  (let [selected-shapes  (wsh/lookup-selected @st/state)]
+    (st/emit!
+     (dwsl/update-layout selected-shapes {:layout-gap {:column-gap value :row-gap value}}))))
+
 ;; Token types -----------------------------------------------------------------
 
 (def token-types
@@ -100,6 +108,8 @@
                        :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}]}}]