♻️ 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
+                    :selrect])
-                    :constraints-h
-                    :constraints-v
-                    :fixed-scroll
-                    :parent-id
-                    :frame-id])
 
 (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)}]]])]))]]
+                  :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")]]])
-               ]]]])]))

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]]
@@ -30,6 +31,7 @@
         type :group
         [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)
@@ -41,6 +43,7 @@
     [: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]]
@@ -24,6 +25,7 @@
   {:frame
    {:measure    :shape
     :layer      :shape
+    :constraint :shape
     :fill       :shape
     :shadow     :children
     :blur       :children
@@ -33,6 +35,7 @@
    :group
    {:measure    :shape
     :layer      :shape
+    :constraint :shape
     :fill       :children
     :shadow     :shape
     :blur       :shape
@@ -42,6 +45,7 @@
    :path
    {:measure    :shape
     :layer      :shape
+    :constraint :shape
     :fill       :shape
     :shadow     :shape
     :blur       :shape
@@ -51,6 +55,7 @@
    :text
    {:measure    :shape
     :layer      :shape
+    :constraint :shape
     :fill       :text
     :shadow     :shape
     :blur       :shape
@@ -60,6 +65,7 @@
    :image
    {:measure    :shape
     :layer      :shape
+    :constraint :shape
     :fill       :ignore
     :shadow     :shape
     :blur       :shape
@@ -69,6 +75,7 @@
    :rect
    {:measure    :shape
     :layer      :shape
+    :constraint :shape
     :fill       :shape
     :shadow     :shape
     :blur       :shape
@@ -78,6 +85,7 @@
    :circle
    {:measure    :shape
     :layer      :shape
+    :constraint :shape
     :fill       :shape
     :shadow     :shape
     :blur       :shape
@@ -87,6 +95,7 @@
    :svg-raw
    {:measure    :shape
     :layer      :shape
+    :constraint :shape
     :fill       :shape
     :shadow     :shape
     :blur       :shape
@@ -96,6 +105,7 @@
 (def props->attrs
   {:measure    measure-attrs
    :layer      layer-attrs
+   :constraint constraint-attrs
    :fill       fill-attrs
    :shadow     shadow-attrs
    :blur       blur-attrs
@@ -178,6 +188,7 @@
         type :multiple
         [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)
@@ -188,6 +199,9 @@
      (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}]