diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.cljs new file mode 100644 index 000000000..a0ec0508f --- /dev/null +++ b/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")]]]) + ]]]]]]))) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs index ae9ba63ba..9305404f5 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs +++ b/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)}]]])]))]]])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/circle.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/circle.cljs index df658997d..713022c43 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/circle.cljs +++ b/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}] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs index 377d136be..c7778b0b6 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs +++ b/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) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/image.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/image.cljs index a506b56b8..b71574c29 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/image.cljs +++ b/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])}] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs index 42d822850..5f69d1ea9 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs +++ b/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}]) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/path.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/path.cljs index 1139f19b9..9d8727a02 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/path.cljs +++ b/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}] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/rect.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/rect.cljs index 17d1c991a..ad537732a 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/rect.cljs +++ b/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}] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/svg_raw.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/svg_raw.cljs index 6d6ae0735..5283cd811 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/svg_raw.cljs +++ b/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])}] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/text.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/text.cljs index 0274d00e9..298983432 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/text.cljs +++ b/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}]