♻️ Refactor to separate constraints to its own module

frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.cljs

@@ -0,0 +1,179 @@
+;; 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) UXBOX Labs SL
+
+(ns app.main.ui.workspace.sidebar.options.menus.constraints
+  (:require
+   [app.common.data :as d]
+   [app.common.geom.shapes :as gsh]
+   [app.common.pages.spec :as spec]
+   [app.common.uuid :as uuid]
+   [app.main.data.workspace.changes :as dch]
+   [app.main.refs :as refs]
+   [app.main.store :as st]
+   [app.main.ui.icons :as i]
+   [app.util.dom :as dom]
+   [app.util.i18n :as i18n :refer [tr]]
+   [cuerdas.core :as str]
+   [rumext.alpha :as mf]))
+
+(def constraint-attrs [:constraints-h
+                       :constraints-v
+                       :fixed-scroll
+                       :parent-id
+                       :frame-id])
+
+(mf/defc constraints-menu
+  [{:keys [ids values] :as props}]
+  (let [old-shapes (deref (refs/objects-by-id ids))
+        frames (map #(deref (refs/object-by-id (:frame-id %))) old-shapes)
+
+        shapes (as-> old-shapes $
+                 (map gsh/transform-shape $)
+                 (map gsh/translate-to-frame $ frames))
+
+        values (let [{:keys [x y]} (-> shapes first :points gsh/points->selrect)]
+                 (cond-> values
+                   (not= (:x values) :multiple) (assoc :x x)
+                   (not= (:y values) :multiple) (assoc :y y)))
+
+        values (let [{:keys [width height]} (-> shapes first :selrect)]
+                 (cond-> values
+                   (not= (:width values) :multiple) (assoc :width width)
+                   (not= (:height values) :multiple) (assoc :height height)))
+
+        in-frame? (and (some? ids)
+                       (not= (:parent-id values) uuid/zero))
+        ;; TODO: uncomment when fixed-scroll is fully implemented
+        ;; first-level? (and in-frame?
+        ;;                   (= (:parent-id values) (:frame-id values)))
+
+        constraints-h (get values :constraints-h (spec/default-constraints-h values))
+        constraints-v (get values :constraints-v (spec/default-constraints-v values))
+
+        on-constraint-button-clicked
+        (mf/use-callback
+         (mf/deps [ids values])
+         (fn [button]
+           (fn [_]
+             (let [constraints-h (get values :constraints-h :scale)
+                   constraints-v (get values :constraints-v :scale)
+
+                   [constraint new-value]
+                   (case button
+                     :top     (case constraints-v
+                                :top [:constraints-v :scale]
+                                :topbottom [:constraints-v :bottom]
+                                :bottom [:constraints-v :topbottom]
+                                [:constraints-v :top])
+                     :bottom  (case constraints-v
+                                :bottom [:constraints-v :scale]
+                                :topbottom [:constraints-v :top]
+                                :top [:constraints-v :topbottom]
+                                [:constraints-v :bottom])
+                     :left    (case constraints-h
+                                :left [:constraints-h :scale]
+                                :leftright [:constraints-h :right]
+                                :right [:constraints-h :leftright]
+                                [:constraints-h :left])
+                     :right   (case constraints-h
+                                :right [:constraints-h :scale]
+                                :leftright [:constraints-h :left]
+                                :left [:constraints-h :leftright]
+                                [:constraints-h :right])
+                     :centerv  (case constraints-v
+                                 :center [:constraints-v :scale]
+                                 [:constraints-v :center])
+                     :centerh  (case constraints-h
+                                 :center [:constraints-h :scale]
+                                 [:constraints-h :center]))]
+               (st/emit! (dch/update-shapes
+                          ids
+                          #(assoc % constraint new-value)))))))
+
+        on-constraint-select-changed
+        (mf/use-callback
+         (mf/deps [ids values])
+         (fn [constraint]
+           (fn [event]
+             (let [value (-> (dom/get-target-val event) (keyword))]
+               (when-not (str/empty? value)
+                 (st/emit! (dch/update-shapes
+                            ids
+                            #(assoc % constraint value))))))))
+
+        ;; TODO: uncomment when fixed-scroll is fully implemented
+        ;; on-fixed-scroll-clicked
+        ;; (mf/use-callback
+        ;;  (mf/deps [ids values])
+        ;;  (fn [_]
+        ;;    (st/emit! (dch/update-shapes ids #(update % :fixed-scroll not)))))
+        ]
+
+     ;; CONSTRAINTS
+     (when in-frame?
+       [:div.element-set
+        [:div.element-set-title
+         [:span (tr "workspace.options.constraints")]]
+
+        [:div.element-set-content
+         [:div.row-flex.align-top
+
+          [:div.constraints-widget
+           [:div.constraints-box]
+           [:div.constraint-button.top
+            {:class (dom/classnames :active (or (= constraints-v :top)
+                                                (= constraints-v :topbottom)))
+             :on-click (on-constraint-button-clicked :top)}]
+           [:div.constraint-button.bottom
+            {:class (dom/classnames :active (or (= constraints-v :bottom)
+                                                (= constraints-v :topbottom)))
+             :on-click (on-constraint-button-clicked :bottom)}]
+           [:div.constraint-button.left
+            {:class (dom/classnames :active (or (= constraints-h :left)
+                                                (= constraints-h :leftright)))
+             :on-click (on-constraint-button-clicked :left)}]
+           [:div.constraint-button.right
+            {:class (dom/classnames :active (or (= constraints-h :right)
+                                                (= constraints-h :leftright)))
+             :on-click (on-constraint-button-clicked :right)}]
+           [:div.constraint-button.centerv
+            {:class (dom/classnames :active (= constraints-v :center))
+             :on-click (on-constraint-button-clicked :centerv)}]
+           [:div.constraint-button.centerh
+            {:class (dom/classnames :active (= constraints-h :center))
+             :on-click (on-constraint-button-clicked :centerh)}]]
+
+          [:div.constraints-form
+           [:div.row-flex
+            [:span.left-right i/full-screen]
+            [:select.input-select {:on-change (on-constraint-select-changed :constraints-h)
+                                   :value (d/name constraints-h "scale")}
+             (when (= constraints-h :multiple)
+               [:option {:value ""} (tr "settings.multiple")])
+             [:option {:value "left"} (tr "workspace.options.constraints.left")]
+             [:option {:value "right"} (tr "workspace.options.constraints.right")]
+             [:option {:value "leftright"} (tr "workspace.options.constraints.leftright")]
+             [:option {:value "center"} (tr "workspace.options.constraints.center")]
+             [:option {:value "scale"} (tr "workspace.options.constraints.scale")]]]
+           [:div.row-flex
+            [:span.top-bottom i/full-screen]
+            [:select.input-select {:on-change (on-constraint-select-changed :constraints-v)
+                                   :value (d/name constraints-v "scale")}
+             (when (= constraints-v :multiple)
+               [:option {:value ""} (tr "settings.multiple")])
+             [:option {:value "top"} (tr "workspace.options.constraints.top")]
+             [:option {:value "bottom"} (tr "workspace.options.constraints.bottom")]
+             [:option {:value "topbottom"} (tr "workspace.options.constraints.topbottom")]
+             [:option {:value "center"} (tr "workspace.options.constraints.center")]
+             [:option {:value "scale"} (tr "workspace.options.constraints.scale")]
+             ;; TODO: uncomment when fixed-scroll is fully implemented
+             ;;  (when first-level?
+             ;;    [:div.row-flex
+             ;;     [:div.fix-when {:class (dom/classnames :active (:fixed-scroll values))
+             ;;                     :on-click on-fixed-scroll-clicked}
+             ;;      i/pin
+             ;;      [:span (tr "workspace.options.constraints.fix-when-scrolling")]]])
+             ]]]]]])))

frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs

@@ -9,8 +9,6 @@
    [app.common.data :as d]
    [app.common.geom.shapes :as gsh]
    [app.common.math :as math]
-   [app.common.pages.spec :as spec]
-   [app.common.uuid :as uuid]
    [app.main.data.workspace :as udw]
    [app.main.data.workspace.changes :as dch]
    [app.main.refs :as refs]
@@ -19,7 +17,6 @@
    [app.main.ui.icons :as i]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
-   [cuerdas.core :as str]
    [rumext.alpha :as mf]))
 
 (def measure-attrs [:proportion-lock
@@ -28,12 +25,7 @@
                     :rotation
                     :rx :ry
                     :r1 :r2 :r3 :r4
-                    :selrect
-                    :constraints-h
-                    :constraints-v
-                    :fixed-scroll
-                    :parent-id
-                    :frame-id])
+                    :selrect])
 
 (defn- attr->string [attr values]
   (let [value (attr values)]
@@ -69,13 +61,6 @@
 
         proportion-lock (:proportion-lock values)
 
-        in-frame? (not= (:parent-id values) uuid/zero)
-        first-level? (and in-frame?
-                          (= (:parent-id values) (:frame-id values)))
-
-        constraints-h (get values :constraints-h (spec/default-constraints-h values))
-        constraints-v (get values :constraints-v (spec/default-constraints-v values))
-
         on-size-change
         (mf/use-callback
          (mf/deps ids)
@@ -173,64 +158,8 @@
         on-radius-r3-change #(on-radius-4-change % :r3)
         on-radius-r4-change #(on-radius-4-change % :r4)
 
-        select-all #(-> % (dom/get-target) (.select))
+        select-all #(-> % (dom/get-target) (.select))]
 
-        on-constraint-button-clicked
-        (mf/use-callback
-         (mf/deps [ids values])
-         (fn [button]
-           (fn [_]
-             (let [constraints-h (get values :constraints-h :scale)
-                   constraints-v (get values :constraints-v :scale)
-
-                   [constraint new-value]
-                   (case button
-                     :top     (case constraints-v
-                                :top [:constraints-v :scale]
-                                :topbottom [:constraints-v :bottom]
-                                :bottom [:constraints-v :topbottom]
-                                [:constraints-v :top])
-                     :bottom  (case constraints-v
-                                :bottom [:constraints-v :scale]
-                                :topbottom [:constraints-v :top]
-                                :top [:constraints-v :topbottom]
-                                [:constraints-v :bottom])
-                     :left    (case constraints-h
-                                :left [:constraints-h :scale]
-                                :leftright [:constraints-h :right]
-                                :right [:constraints-h :leftright]
-                                [:constraints-h :left])
-                     :right   (case constraints-h
-                                :right [:constraints-h :scale]
-                                :leftright [:constraints-h :left]
-                                :left [:constraints-h :leftright]
-                                [:constraints-h :right])
-                     :centerv  (case constraints-v
-                                 :center [:constraints-v :scale]
-                                 [:constraints-v :center])
-                     :centerh  (case constraints-h
-                                 :center [:constraints-h :scale]
-                                 [:constraints-h :center]))]
-               (st/emit! (dch/update-shapes
-                          ids
-                          #(assoc % constraint new-value)))))))
-
-        on-constraint-select-changed
-        (mf/use-callback
-         (mf/deps [ids values])
-         (fn [constraint]
-           (fn [event]
-             (let [value (-> (dom/get-target-val event) (keyword))]
-               (when-not (str/empty? value)
-                 (st/emit! (dch/update-shapes
-                            ids
-                            #(assoc % constraint value))))))))
-
-        on-fixed-scroll-clicked
-        (mf/use-callback
-         (mf/deps [ids values])
-         (fn [_]
-           (st/emit! (dch/update-shapes ids #(update % :fixed-scroll not)))))]
     [:*
      [:div.element-set
       [:div.element-set-content
@@ -360,69 +289,4 @@
                   :min 0
                   :on-click select-all
                   :on-change on-radius-r4-change
-                  :value (attr->string :r4 values)}]]])]))]]
-
-     ;; CONSTRAINTS
-     (when in-frame?
-       [:div.element-set
-        [:div.element-set-title
-         [:span (tr "workspace.options.constraints")]]
-
-        [:div.element-set-content
-         [:div.row-flex.align-top
-
-          [:div.constraints-widget
-           [:div.constraints-box]
-           [:div.constraint-button.top
-            {:class (dom/classnames :active (or (= constraints-v :top)
-                                                (= constraints-v :topbottom)))
-             :on-click (on-constraint-button-clicked :top)}]
-           [:div.constraint-button.bottom
-            {:class (dom/classnames :active (or (= constraints-v :bottom)
-                                                (= constraints-v :topbottom)))
-             :on-click (on-constraint-button-clicked :bottom)}]
-           [:div.constraint-button.left
-            {:class (dom/classnames :active (or (= constraints-h :left)
-                                                (= constraints-h :leftright)))
-             :on-click (on-constraint-button-clicked :left)}]
-           [:div.constraint-button.right
-            {:class (dom/classnames :active (or (= constraints-h :right)
-                                                (= constraints-h :leftright)))
-             :on-click (on-constraint-button-clicked :right)}]
-           [:div.constraint-button.centerv
-            {:class (dom/classnames :active (= constraints-v :center))
-             :on-click (on-constraint-button-clicked :centerv)}]
-           [:div.constraint-button.centerh
-            {:class (dom/classnames :active (= constraints-h :center))
-             :on-click (on-constraint-button-clicked :centerh)}]]
-
-          [:div.constraints-form
-           [:div.row-flex
-            [:span.left-right i/full-screen]
-            [:select.input-select {:on-change (on-constraint-select-changed :constraints-h)
-                                   :value (d/name constraints-h "scale")}
-             (when (= constraints-h :multiple)
-               [:option {:value ""} (tr "settings.multiple")])
-             [:option {:value "left"} (tr "workspace.options.constraints.left")]
-             [:option {:value "right"} (tr "workspace.options.constraints.right")]
-             [:option {:value "leftright"} (tr "workspace.options.constraints.leftright")]
-             [:option {:value "center"} (tr "workspace.options.constraints.center")]
-             [:option {:value "scale"} (tr "workspace.options.constraints.scale")]]]
-           [:div.row-flex
-            [:span.top-bottom i/full-screen]
-            [:select.input-select {:on-change (on-constraint-select-changed :constraints-v)
-                                   :value (d/name constraints-v "scale")}
-             (when (= constraints-v :multiple)
-               [:option {:value ""} (tr "settings.multiple")])
-             [:option {:value "top"} (tr "workspace.options.constraints.top")]
-             [:option {:value "bottom"} (tr "workspace.options.constraints.bottom")]
-             [:option {:value "topbottom"} (tr "workspace.options.constraints.topbottom")]
-             [:option {:value "center"} (tr "workspace.options.constraints.center")]
-             [:option {:value "scale"} (tr "workspace.options.constraints.scale")]]]
-          ;;  (when first-level?
-          ;;    [:div.row-flex
-          ;;     [:div.fix-when {:class (dom/classnames :active (:fixed-scroll values))
-          ;;                     :on-click on-fixed-scroll-clicked}
-          ;;      i/pin
-          ;;      [:span (tr "workspace.options.constraints.fix-when-scrolling")]]])
-               ]]]])]))
+                  :value (attr->string :r4 values)}]]])]))]]]))

frontend/src/app/main/ui/workspace/sidebar/options/shapes/circle.cljs

@@ -7,6 +7,7 @@
 (ns app.main.ui.workspace.sidebar.options.shapes.circle
   (:require
    [app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]]
+   [app.main.ui.workspace.sidebar.options.menus.constraints :refer [constraint-attrs constraints-menu]]
    [app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-attrs fill-menu]]
    [app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-attrs layer-menu]]
    [app.main.ui.workspace.sidebar.options.menus.measures :refer [measure-attrs measures-menu]]
@@ -21,12 +22,15 @@
         type (:type shape)
         measure-values (select-keys shape measure-attrs)
         stroke-values (select-keys shape stroke-attrs)
-        layer-values (select-keys shape layer-attrs)]
+        layer-values (select-keys shape layer-attrs)
+        constraint-values (select-keys shape constraint-attrs)]
     [:*
      [:& measures-menu {:ids ids
                         :type type
                         :values measure-values
                         :options #{:size :position :rotation}}]
+     [:& constraints-menu {:ids ids
+                           :values constraint-values}]
      [:& layer-menu {:ids ids
                      :type type
                      :values layer-values}]

frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs

@@ -9,6 +9,7 @@
    [app.common.data :as d]
    [app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]]
    [app.main.ui.workspace.sidebar.options.menus.component :refer [component-attrs component-menu]]
+   [app.main.ui.workspace.sidebar.options.menus.constraints :refer [constraints-menu]]
    [app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-menu]]
    [app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-menu]]
    [app.main.ui.workspace.sidebar.options.menus.measures :refer [measures-menu]]
@@ -28,19 +29,21 @@
         objects (->> shape-with-children (group-by :id) (d/mapm (fn [_ v] (first v))))
 
         type :group
-        [measure-ids measure-values] (get-attrs [shape] objects :measure)
-        [layer-ids   layer-values]   (get-attrs [shape] objects :layer)
-        [fill-ids    fill-values]    (get-attrs [shape] objects :fill)
-        [shadow-ids  shadow-values]  (get-attrs [shape] objects :shadow)
-        [blur-ids    blur-values]    (get-attrs [shape] objects :blur)
-        [stroke-ids  stroke-values]  (get-attrs [shape] objects :stroke)
-        [text-ids    text-values]    (get-attrs [shape] objects :text)
-        [svg-ids     svg-values]     [[(:id shape)] (select-keys shape [:svg-attrs])]
-        [comp-ids    comp-values]    [[(:id shape)] (select-keys shape component-attrs)]]
+        [measure-ids    measure-values]    (get-attrs [shape] objects :measure)
+        [layer-ids      layer-values]      (get-attrs [shape] objects :layer)
+        [constraint-ids constraint-values] (get-attrs [shape] objects :constraint)
+        [fill-ids       fill-values]       (get-attrs [shape] objects :fill)
+        [shadow-ids     shadow-values]     (get-attrs [shape] objects :shadow)
+        [blur-ids       blur-values]       (get-attrs [shape] objects :blur)
+        [stroke-ids     stroke-values]     (get-attrs [shape] objects :stroke)
+        [text-ids       text-values]       (get-attrs [shape] objects :text)
+        [svg-ids        svg-values]        [[(:id shape)] (select-keys shape [:svg-attrs])]
+        [comp-ids       comp-values]       [[(:id shape)] (select-keys shape component-attrs)]]
 
     [:div.options
      [:& measures-menu {:type type :ids measure-ids :values measure-values}]
      [:& component-menu {:ids comp-ids :values comp-values}]
+     [:& constraints-menu {:ids constraint-ids :values constraint-values}]
      [:& layer-menu {:type type :ids layer-ids :values layer-values}]
 
      (when-not (empty? fill-ids)

frontend/src/app/main/ui/workspace/sidebar/options/shapes/image.cljs

@@ -7,6 +7,7 @@
 (ns app.main.ui.workspace.sidebar.options.shapes.image
   (:require
    [app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]]
+   [app.main.ui.workspace.sidebar.options.menus.constraints :refer [constraint-attrs constraints-menu]]
    [app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-attrs layer-menu]]
    [app.main.ui.workspace.sidebar.options.menus.measures :refer [measure-attrs measures-menu]]
    [app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]]
@@ -17,14 +18,20 @@
   (let [ids [(:id shape)]
         type (:type shape)
         measure-values (select-keys shape measure-attrs)
-        layer-values (select-keys shape layer-attrs)]
+        layer-values (select-keys shape layer-attrs)
+        constraint-values (select-keys shape constraint-attrs)]
     [:*
      [:& measures-menu {:ids ids
                         :type type
                         :values measure-values}]
+
+     [:& constraints-menu {:ids ids
+                           :values constraint-values}]
+
      [:& layer-menu {:ids ids
                      :type type
                      :values layer-values}]
+
      [:& shadow-menu {:ids ids
                       :values (select-keys shape [:shadow])}]
 

frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs

@@ -10,6 +10,7 @@
    [app.common.data :as d]
    [app.common.text :as txt]
    [app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-attrs blur-menu]]
+   [app.main.ui.workspace.sidebar.options.menus.constraints :refer [constraint-attrs constraints-menu]]
    [app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-attrs fill-menu]]
    [app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-attrs layer-menu]]
    [app.main.ui.workspace.sidebar.options.menus.measures :refer [measure-attrs measures-menu]]
@@ -22,85 +23,94 @@
 ;; attribute and how to handle them
 (def type->props
   {:frame
-   {:measure :shape
-    :layer   :shape
-    :fill    :shape
-    :shadow  :children
-    :blur    :children
-    :stroke  :children
-    :text    :children}
+   {:measure    :shape
+    :layer      :shape
+    :constraint :shape
+    :fill       :shape
+    :shadow     :children
+    :blur       :children
+    :stroke     :children
+    :text       :children}
 
    :group
-   {:measure :shape
-    :layer   :shape
-    :fill    :children
-    :shadow  :shape
-    :blur    :shape
-    :stroke  :children
-    :text    :children}
+   {:measure    :shape
+    :layer      :shape
+    :constraint :shape
+    :fill       :children
+    :shadow     :shape
+    :blur       :shape
+    :stroke     :children
+    :text       :children}
 
    :path
-   {:measure :shape
-    :layer   :shape
-    :fill    :shape
-    :shadow  :shape
-    :blur    :shape
-    :stroke  :shape
-    :text    :ignore}
+   {:measure    :shape
+    :layer      :shape
+    :constraint :shape
+    :fill       :shape
+    :shadow     :shape
+    :blur       :shape
+    :stroke     :shape
+    :text       :ignore}
 
    :text
-   {:measure :shape
-    :layer   :shape
-    :fill    :text
-    :shadow  :shape
-    :blur    :shape
-    :stroke  :ignore
-    :text    :text}
+   {:measure    :shape
+    :layer      :shape
+    :constraint :shape
+    :fill       :text
+    :shadow     :shape
+    :blur       :shape
+    :stroke     :ignore
+    :text       :text}
 
    :image
-   {:measure :shape
-    :layer   :shape
-    :fill    :ignore
-    :shadow  :shape
-    :blur    :shape
-    :stroke  :ignore
-    :text    :ignore}
+   {:measure    :shape
+    :layer      :shape
+    :constraint :shape
+    :fill       :ignore
+    :shadow     :shape
+    :blur       :shape
+    :stroke     :ignore
+    :text       :ignore}
 
    :rect
-   {:measure :shape
-    :layer   :shape
-    :fill    :shape
-    :shadow  :shape
-    :blur    :shape
-    :stroke  :shape
-    :text    :ignore}
+   {:measure    :shape
+    :layer      :shape
+    :constraint :shape
+    :fill       :shape
+    :shadow     :shape
+    :blur       :shape
+    :stroke     :shape
+    :text       :ignore}
 
    :circle
-   {:measure :shape
-    :layer   :shape
-    :fill    :shape
-    :shadow  :shape
-    :blur    :shape
-    :stroke  :shape
-    :text    :ignore}
+   {:measure    :shape
+    :layer      :shape
+    :constraint :shape
+    :fill       :shape
+    :shadow     :shape
+    :blur       :shape
+    :stroke     :shape
+    :text       :ignore}
 
    :svg-raw
-   {:measure :shape
-    :layer   :shape
-    :fill    :shape
-    :shadow  :shape
-    :blur    :shape
-    :stroke  :shape
-    :text    :ignore}})
+   {:measure    :shape
+    :layer      :shape
+    :constraint :shape
+    :fill       :shape
+    :shadow     :shape
+    :blur       :shape
+    :stroke     :shape
+    :text       :ignore}})
 
 (def props->attrs
-  {:measure measure-attrs
-   :layer   layer-attrs
-   :fill    fill-attrs
-   :shadow  shadow-attrs
-   :blur    blur-attrs
-   :stroke  stroke-attrs
-   :text    ot/attrs})
+  {:measure    measure-attrs
+   :layer      layer-attrs
+   :constraint constraint-attrs
+   :fill       fill-attrs
+   :shadow     shadow-attrs
+   :blur       blur-attrs
+   :stroke     stroke-attrs
+   :text       ot/attrs})
 
 (def shadow-keys [:style :color :offset-x :offset-y :blur :spread])
 
@@ -176,18 +186,22 @@
         objects (->> shapes-with-children (group-by :id) (d/mapm (fn [_ v] (first v))))
 
         type :multiple
-        [measure-ids measure-values] (get-attrs shapes objects :measure)
-        [layer-ids   layer-values]   (get-attrs shapes objects :layer)
-        [fill-ids    fill-values]    (get-attrs shapes objects :fill)
-        [shadow-ids  shadow-values]  (get-attrs shapes objects :shadow)
-        [blur-ids    blur-values]    (get-attrs shapes objects :blur)
-        [stroke-ids  stroke-values]  (get-attrs shapes objects :stroke)
-        [text-ids    text-values]    (get-attrs shapes objects :text)]
+        [measure-ids    measure-values]    (get-attrs shapes objects :measure)
+        [layer-ids      layer-values]      (get-attrs shapes objects :layer)
+        [constraint-ids constraint-values] (get-attrs shapes objects :constraint)
+        [fill-ids       fill-values]       (get-attrs shapes objects :fill)
+        [shadow-ids     shadow-values]     (get-attrs shapes objects :shadow)
+        [blur-ids       blur-values]       (get-attrs shapes objects :blur)
+        [stroke-ids     stroke-values]     (get-attrs shapes objects :stroke)
+        [text-ids       text-values]       (get-attrs shapes objects :text)]
 
     [:div.options
      (when-not (empty? measure-ids)
        [:& measures-menu {:type type :ids measure-ids :values measure-values}])
 
+     (when-not (empty? constraint-ids)
+       [:& constraints-menu {:ids constraint-ids :values constraint-values}])
+
      (when-not (empty? layer-ids)
        [:& layer-menu {:type type :ids layer-ids :values layer-values}])
 

frontend/src/app/main/ui/workspace/sidebar/options/shapes/path.cljs

@@ -7,6 +7,7 @@
 (ns app.main.ui.workspace.sidebar.options.shapes.path
   (:require
    [app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]]
+   [app.main.ui.workspace.sidebar.options.menus.constraints :refer [constraint-attrs constraints-menu]]
    [app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-attrs fill-menu]]
    [app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-attrs layer-menu]]
    [app.main.ui.workspace.sidebar.options.menus.measures :refer [measure-attrs measures-menu]]
@@ -21,11 +22,14 @@
         type (:type shape)
         measure-values (select-keys shape measure-attrs)
         stroke-values (select-keys shape stroke-attrs)
-        layer-values (select-keys shape layer-attrs)]
+        layer-values (select-keys shape layer-attrs)
+        constraint-values (select-keys shape constraint-attrs)]
     [:*
      [:& measures-menu {:ids ids
                         :type type
                         :values measure-values}]
+     [:& constraints-menu {:ids ids
+                           :values constraint-values}]
      [:& layer-menu {:ids ids
                      :type type
                      :values layer-values}]

frontend/src/app/main/ui/workspace/sidebar/options/shapes/rect.cljs

@@ -7,6 +7,7 @@
 (ns app.main.ui.workspace.sidebar.options.shapes.rect
   (:require
    [app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]]
+   [app.main.ui.workspace.sidebar.options.menus.constraints :refer [constraint-attrs constraints-menu]]
    [app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-attrs fill-menu]]
    [app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-attrs layer-menu]]
    [app.main.ui.workspace.sidebar.options.menus.measures :refer [measure-attrs measures-menu]]
@@ -22,6 +23,7 @@
         type (:type shape)
         measure-values (select-keys shape measure-attrs)
         layer-values (select-keys shape layer-attrs)
+        constraint-values (select-keys shape constraint-attrs)
         fill-values (select-keys shape fill-attrs)
         stroke-values (select-keys shape stroke-attrs)]
     [:*
@@ -29,6 +31,9 @@
                         :type type
                         :values measure-values}]
 
+     [:& constraints-menu {:ids ids
+                           :values constraint-values}]
+
      [:& layer-menu {:ids ids
                      :type type
                      :values layer-values}]

frontend/src/app/main/ui/workspace/sidebar/options/shapes/svg_raw.cljs

@@ -7,6 +7,7 @@
 (ns app.main.ui.workspace.sidebar.options.shapes.svg-raw
   (:require
    [app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]]
+   [app.main.ui.workspace.sidebar.options.menus.constraints :refer [constraint-attrs constraints-menu]]
    [app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-attrs fill-menu]]
    [app.main.ui.workspace.sidebar.options.menus.measures :refer [measure-attrs measures-menu]]
    [app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]]
@@ -93,6 +94,7 @@
         type (:type shape)
         {:keys [tag] :as content} (:content shape)
         measure-values (select-keys shape measure-attrs)
+        constraint-values (select-keys shape constraint-attrs)
         fill-values    (get-fill-values shape)
         stroke-values  (get-stroke-values shape)]
 
@@ -102,12 +104,17 @@
                           :type type
                           :values measure-values}]
 
+       [:& constraints-menu {:ids ids
+                             :values constraint-values}]
+
        [:& fill-menu {:ids ids
                       :type type
                       :values fill-values}]
+
        [:& stroke-menu {:ids ids
                         :type type
                         :values stroke-values}]
+
        [:& shadow-menu {:ids ids
                         :values (select-keys shape [:shadow])}]
 

frontend/src/app/main/ui/workspace/sidebar/options/shapes/text.cljs

@@ -10,6 +10,7 @@
    [app.main.data.workspace.texts :as dwt]
    [app.main.refs :as refs]
    [app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]]
+   [app.main.ui.workspace.sidebar.options.menus.constraints :refer [constraint-attrs constraints-menu]]
    [app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-menu]]
    [app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-attrs layer-menu]]
    [app.main.ui.workspace.sidebar.options.menus.measures :refer [measure-attrs measures-menu]]
@@ -60,6 +61,10 @@
        :type type
        :values (select-keys shape measure-attrs)}]
 
+     [:& constraints-menu
+      {:ids ids
+       :values (select-keys shape constraint-attrs)}]
+
      [:& layer-menu {:ids ids
                      :type type
                      :values layer-values}]