diff --git a/common/src/app/common/geom/shapes/layout.cljc b/common/src/app/common/geom/shapes/layout.cljc index 1cca7ec45..8020fbef1 100644 --- a/common/src/app/common/geom/shapes/layout.cljc +++ b/common/src/app/common/geom/shapes/layout.cljc @@ -8,8 +8,7 @@ (:require [app.common.geom.matrix :as gmt] [app.common.geom.point :as gpt] - [app.common.geom.shapes.rect :as gre] - [app.common.geom.shapes.common :as gco])) + [app.common.geom.shapes.rect :as gre])) ;; :layout ;; true if active, false if not ;; :layout-dir ;; :right, :left, :top, :bottom diff --git a/common/src/app/common/types/shape.cljc b/common/src/app/common/types/shape.cljc index 317e4af78..a5b182f64 100644 --- a/common/src/app/common/types/shape.cljc +++ b/common/src/app/common/types/shape.cljc @@ -13,6 +13,7 @@ [app.common.types.shape.blur :as ctsb] [app.common.types.shape.export :as ctse] [app.common.types.shape.interactions :as ctsi] + [app.common.types.shape.layout :as ctsl] [app.common.types.shape.radius :as ctsr] [app.common.types.shape.shadow :as ctss] [clojure.set :as set] @@ -156,68 +157,71 @@ :luminosity}) (s/def ::shape-attrs - (s/keys :opt-un [::id - ::type - ::name - ::component-id - ::component-file - ::component-root? - ::shape-ref - ::selrect - ::points - ::blocked - ::collapsed - ::fills - ::fill-color ;; TODO: remove these attributes - ::fill-opacity ;; when backward compatibility - ::fill-color-gradient ;; is no longer needed - ::fill-color-ref-file ;; - ::fill-color-ref-id ;; - ::hide-fill-on-export - ::font-family - ::font-size - ::font-style - ::font-weight - ::hidden - ::letter-spacing - ::line-height - ::locked - ::proportion - ::proportion-lock - ::constraints-h - ::constraints-v - ::fixed-scroll - ::ctsr/rx - ::ctsr/ry - ::ctsr/r1 - ::ctsr/r2 - ::ctsr/r3 - ::ctsr/r4 - ::x - ::y - ::exports - ::shapes - ::strokes - ::stroke-color ;; TODO: same thing - ::stroke-color-ref-file ;; - ::stroke-color-ref-i ;; - ::stroke-opacity ;; - ::stroke-style - ::stroke-width - ::stroke-alignment - ::stroke-cap-start - ::stroke-cap-end - ::text-align - ::transform - ::transform-inverse - ::width - ::height - ::masked-group? - ::ctsi/interactions - ::ctss/shadow - ::ctsb/blur - ::opacity - ::blend-mode])) + (s/and + ::ctsl/layout-container-props + ::ctsl/layout-child-props + (s/keys :opt-un [::id + ::type + ::name + ::component-id + ::component-file + ::component-root? + ::shape-ref + ::selrect + ::points + ::blocked + ::collapsed + ::fills + ::fill-color ;; TODO: remove these attributes + ::fill-opacity ;; when backward compatibility + ::fill-color-gradient ;; is no longer needed + ::fill-color-ref-file ;; + ::fill-color-ref-id ;; + ::hide-fill-on-export + ::font-family + ::font-size + ::font-style + ::font-weight + ::hidden + ::letter-spacing + ::line-height + ::locked + ::proportion + ::proportion-lock + ::constraints-h + ::constraints-v + ::fixed-scroll + ::ctsr/rx + ::ctsr/ry + ::ctsr/r1 + ::ctsr/r2 + ::ctsr/r3 + ::ctsr/r4 + ::x + ::y + ::exports + ::shapes + ::strokes + ::stroke-color ;; TODO: same thing + ::stroke-color-ref-file ;; + ::stroke-color-ref-i ;; + ::stroke-opacity ;; + ::stroke-style + ::stroke-width + ::stroke-alignment + ::stroke-cap-start + ::stroke-cap-end + ::text-align + ::transform + ::transform-inverse + ::width + ::height + ::masked-group? + ::ctsi/interactions + ::ctss/shadow + ::ctsb/blur + ::opacity + ::blend-mode]))) (s/def :internal.shape.text/type #{"root" "paragraph-set" "paragraph"}) (s/def :internal.shape.text/children diff --git a/common/src/app/common/types/shape/layout.cljc b/common/src/app/common/types/shape/layout.cljc new file mode 100644 index 000000000..4e7e7059b --- /dev/null +++ b/common/src/app/common/types/shape/layout.cljc @@ -0,0 +1,61 @@ +;; 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.common.types.shape.layout + (:require + [app.common.spec :as us] + [clojure.spec.alpha :as s])) + +(s/def ::layout boolean?) +(s/def ::layout-dir #{:right :left :top :bottom}) +(s/def ::layout-gap ::us/safe-number) +(s/def ::layout-type #{:packed :space-between :space-around}) +(s/def ::layout-wrap-type #{:wrap :no-wrap}) +(s/def ::layout-padding-type #{:simple :multiple}) + +(s/def ::p1 ::us/safe-number) +(s/def ::p2 ::us/safe-number) +(s/def ::p3 ::us/safe-number) +(s/def ::p4 ::us/safe-number) + +(s/def ::layout-padding + (s/keys :req-un [::p1] + :opt-un [::p2 ::p3 ::p4])) + +(s/def ::layout-h-orientation #{:left :center :right}) +(s/def ::layout-v-orientation #{:top :center :bottom}) + +(s/def ::layout-container-props + (s/keys :opt-un [::layout + ::layout-dir + ::layout-gap + ::layout-type + ::layout-wrap-type + ::layout-padding-type + ::layout-padding + ::layout-h-orientation + ::layout-v-orientation])) + +(s/def ::layout-margin (s/keys :req-un [::m1] + :opt-un [::m2 ::m3 ::m4])) + +(s/def ::layout-margin-type #{:simple :multiple}) +(s/def ::layout-h-behavior #{:fill :fix :auto}) +(s/def ::layout-v-behavior #{:fill :fix :auto}) +(s/def ::layout-max-h ::us/safe-number) +(s/def ::layout-min-h ::us/safe-number) +(s/def ::layout-max-w ::us/safe-number) +(s/def ::layout-min-w ::us/safe-number) + +(s/def ::layout-child-props + (s/keys :opt-un [::layout-margin + ::layout-margin-type + ::layout-h-behavior + ::layout-v-behavior + ::layout-max-h + ::layout-min-h + ::layout-max-w + ::layout-min-w])) diff --git a/frontend/src/app/main/constants.cljs b/frontend/src/app/main/constants.cljs index 5f9e84486..d57c7ec16 100644 --- a/frontend/src/app/main/constants.cljs +++ b/frontend/src/app/main/constants.cljs @@ -23,8 +23,6 @@ :grid-alignment true :background "var(--color-white)"}) -(def has-layout-item false) - (def size-presets [{:name "APPLE"} {:name "iPhone 12/12 Pro" diff --git a/frontend/src/app/main/data/workspace/shape_layout.cljs b/frontend/src/app/main/data/workspace/shape_layout.cljs index 49cb09a32..3dc797b3c 100644 --- a/frontend/src/app/main/data/workspace/shape_layout.cljs +++ b/frontend/src/app/main/data/workspace/shape_layout.cljs @@ -7,6 +7,7 @@ (ns app.main.data.workspace.shape-layout (:require [app.common.data :as d] + [app.common.pages.helpers :as cph] [app.main.data.workspace.changes :as dwc] [app.main.data.workspace.state-helpers :as wsh] [app.main.data.workspace.transforms :as dwt] @@ -72,3 +73,12 @@ (rx/of (dwc/update-shapes ids #(d/deep-merge % changes)) (update-layout-positions ids))))) +(defn update-layout-child + [ids changes] + (ptk/reify ::update-layout-child + ptk/WatchEvent + (watch [_ state _] + (let [objects (wsh/lookup-page-objects state) + parent-ids (->> ids (map #(cph/get-parent-id objects %)))] + (rx/of (dwc/update-shapes ids #(d/deep-merge (or % {}) changes)) + (update-layout-positions parent-ids)))))) diff --git a/frontend/src/app/main/refs.cljs b/frontend/src/app/main/refs.cljs index 81d51b461..ce4f0b8d5 100644 --- a/frontend/src/app/main/refs.cljs +++ b/frontend/src/app/main/refs.cljs @@ -410,3 +410,11 @@ (defn workspace-text-modifier-by-id [id] (l/derived #(get % id) workspace-text-modifier =)) + +(defn is-layout-child? + [ids] + (l/derived + (fn [objects] + (->> ids + (some #(-> (cph/get-parent objects %) :layout)))) + workspace-page-objects)) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs index 0abca9fc2..942a86f71 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs @@ -293,7 +293,8 @@ [:div.direction [:* (for [dir [:left :right :bottom :top]] - [:& direction-row {:dir dir + [:& direction-row {:key (d/name dir) + :dir dir :saved-dir (:layout-dir values) :set-direction set-direction}])]] [:div.gap.tooltip.tooltip-bottom-left diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs index 448211b1f..59d955b60 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs @@ -8,6 +8,8 @@ (:require [app.common.data :as d] [app.common.data.macros :as dm] + [app.main.data.workspace.shape-layout :as dwsl] + [app.main.store :as st] [app.main.ui.components.numeric-input :refer [numeric-input]] [app.main.ui.icons :as i] [app.util.dom :as dom] @@ -15,18 +17,19 @@ [rumext.alpha :as mf])) (def layout-item-attrs - [:margin ;; {:m1 0 :m2 0 :m3 0 :m4 0} - :margin-type ;; :simple :multiple - :h-behavior ;; :fill :fix :auto - :v-behavior ;; :fill :fix :auto - :max-h ;; num - :min-h ;; num - :max-w ;; num - :min-w ]) ;; num -(mf/defc margin-section - [{:keys [test-values change-margin-style select-all on-margin-change] :as props}] + [:layout-margin ;; {:m1 0 :m2 0 :m3 0 :m4 0} + :layout-margin-type ;; :simple :multiple + :layout-h-behavior ;; :fill :fix :auto + :layout-v-behavior ;; :fill :fix :auto + :layout-max-h ;; num + :layout-min-h ;; num + :layout-max-w ;; num + :layout-min-w ]) ;; num - (let [margin-type (:margin-type @test-values)] +(mf/defc margin-section + [{:keys [values change-margin-style on-margin-change] :as props}] + + (let [margin-type (or (:layout-margin-type values) :simple)] [:div.row-flex [:div.margin-options @@ -49,9 +52,9 @@ [:> numeric-input {:placeholder "--" - :on-click select-all + :on-click #(dom/select-target %) :on-change (partial on-margin-change :simple) - :value (:m1 (:margin @test-values))}]]] + :value (or (-> values :layout-margin :m1) 0)}]]] (= margin-type :multiple) [:* @@ -67,101 +70,93 @@ [:div.input-element.mini [:> numeric-input {:placeholder "--" - :on-click select-all + :on-click #(dom/select-target %) :on-change (partial on-margin-change num) - :value (num (:margin @test-values))}]]])])])) + :value (or (-> values :layout-margin num) 0)}]]])])])) (mf/defc element-behavior - [{:keys [is-layout-container? is-layout-item? h-behavior v-behavior on-change-behavior] :as props}] - (let [auto? is-layout-container? - fill? (and (= true is-layout-item?) (not= true is-layout-container?))] + [{:keys [is-layout-container? is-layout-child? layout-h-behavior layout-v-behavior on-change-behavior] :as props}] + (let [fill? is-layout-child? + auto? is-layout-container?] [:div.layout-behavior [:div.button-wrapper.horizontal [:button.behavior-btn.tooltip.tooltip-bottom {:alt "horizontal fix" - :class (dom/classnames :activated (= h-behavior :fix)) + :class (dom/classnames :activated (= layout-h-behavior :fix)) :on-click #(on-change-behavior :h :fix)} [:span.icon i/auto-fix-layout]] (when fill? [:button.behavior-btn.tooltip.tooltip-bottom {:alt "horizontal fill" - :class (dom/classnames :activated (= h-behavior :fill)) + :class (dom/classnames :activated (= layout-h-behavior :fill)) :on-click #(on-change-behavior :h :fill)} [:span.icon i/auto-fill]]) (when auto? [:button.behavior-btn.tooltip.tooltip-bottom {:alt "horizontal auto" - :class (dom/classnames :activated (= h-behavior :auto)) + :class (dom/classnames :activated (= layout-v-behavior :auto)) :on-click #(on-change-behavior :h :auto)} [:span.icon i/auto-hug]])] + [:div.button-wrapper [:button.behavior-btn.tooltip.tooltip-bottom {:alt "vertical fix" - :class (dom/classnames :activated (= v-behavior :fix)) + :class (dom/classnames :activated (= layout-v-behavior :fix)) :on-click #(on-change-behavior :v :fix)} [:span.icon i/auto-fix-layout]] (when fill? [:button.behavior-btn.tooltip.tooltip-bottom {:alt "vertical fill" - :class (dom/classnames :activated (= v-behavior :fill)) + :class (dom/classnames :activated (= layout-v-behavior :fill)) :on-click #(on-change-behavior :v :fill)} [:span.icon i/auto-fill]]) (when auto? [:button.behavior-btn.tooltip.tooltip-bottom {:alt "vertical auto" - :class (dom/classnames :activated (= v-behavior :auto)) + :class (dom/classnames :activated (= layout-v-behavior :auto)) :on-click #(on-change-behavior :v :auto)} [:span.icon i/auto-hug]])]])) (mf/defc layout-item-menu {::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values" "type"]))]} - [{:keys [_ids _type _values] :as props}] - (let [test-values (mf/use-state {:margin {:m1 0 :m2 0 :m3 0 :m4 0} - :margin-type :simple - :h-behavior :fill - :v-behavior :fill - :max-h 100 - :min-h 100 - :max-w 100 - :min-w 100}) - open? (mf/use-state false) + [{:keys [ids _type values is-layout-child? is-layout-container?] :as props}] + (let [open? (mf/use-state false) toggle-open (fn [] (swap! open? not)) - is-layout-container? true - is-layout-item? true + change-margin-style (fn [type] - (swap! test-values assoc :margin-type type)) - - select-all #(dom/select-target %) + (st/emit! (dwsl/update-layout-child ids {:layout-margin-type type}))) on-margin-change (fn [type val] (if (= type :simple) - (swap! test-values assoc :margin {:m1 val :m2 val :m3 val :m4 val}) - (swap! test-values assoc-in [:margin type] val))) + (st/emit! (dwsl/update-layout-child ids {:layout-margin {:m1 val :m2 val :m3 val :m4 val}})) + (st/emit! (dwsl/update-layout-child ids {:layout-margin {type val}})))) on-change-behavior (fn [dir value] (if (= dir :h) - (swap! test-values assoc :h-behavior value) - (swap! test-values assoc :v-behavior value))) + (st/emit! (dwsl/update-layout-child ids {:layout-h-behavior value})) + (st/emit! (dwsl/update-layout-child ids {:layout-v-behavior value})))) on-size-change (fn [measure value] - (swap! test-values assoc measure value))] + (st/emit! (dwsl/update-layout-child ids {measure value})))] + [:div.element-set [:div.element-set-title [:span (tr "workspace.options.layout-item.title")]] + [:div.element-set-content.layout-item-menu - [:& element-behavior {:is-layout-container? is-layout-container? - :is-layout-item? is-layout-item? - :v-behavior (:v-behavior @test-values) - :h-behavior (:h-behavior @test-values) + [:& element-behavior {:is-layout-child? is-layout-child? + :is-layout-container? is-layout-container? + :layout-v-behavior (or (:layout-v-behavior values) :fix) + :layout-h-behavior (or (:layout-h-behavior values) :fix) :on-change-behavior on-change-behavior}] - [:div.margin [:& margin-section {:test-values test-values + + [:div.margin [:& margin-section {:values values :change-margin-style change-margin-style - :select-all select-all :on-margin-change on-margin-change}]] [:div.advanced-ops-container [:div.advanced-ops.toltip.tooltip-bottom @@ -169,22 +164,24 @@ :alt (tr "workspace.options.layout-item.advanced-ops")} [:div.element-set-actions-button i/actions] [:span (tr "workspace.options.layout-item.advanced-ops")]]] - (when (= true @open?) + + (when @open? [:div.advanced-ops-body - (for [item [:max-h :min-h :max-w :min-w]] + (for [item [:layout-max-h :layout-min-h :layout-max-w :layout-min-w]] [:div.input-element - {:alt (tr (dm/str "workspace.options.layout-item." (d/name item))) + {:key (d/name item) + :alt (tr (dm/str "workspace.options.layout-item." (d/name item))) :title (tr (dm/str "workspace.options.layout-item." (d/name item))) - :class (dom/classnames "maxH" (= item :max-h) - "minH" (= item :min-h) - "maxW" (= item :max-w) - "minW" (= item :min-w)) - :key item} + :class (dom/classnames "maxH" (= item :layout-max-h) + "minH" (= item :layout-min-h) + "maxW" (= item :layout-max-w) + "minW" (= item :layout-min-w))} + [:> numeric-input {:no-validate true :min 0 :data-wrap true :placeholder "--" - :on-click select-all + :on-click #(dom/select-target %) :on-change (partial on-size-change item) - :value (item @test-values)}]])])]])) + :value (get values item)}]])])]])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/bool.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/bool.cljs index 69517bad6..6333c0d18 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/bool.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/bool.cljs @@ -6,7 +6,7 @@ (ns app.main.ui.workspace.sidebar.options.shapes.bool (:require - [app.main.constants :refer [has-layout-item]] + [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-attrs fill-menu]] @@ -25,17 +25,22 @@ stroke-values (select-keys shape stroke-attrs) layer-values (select-keys shape layer-attrs) constraint-values (select-keys shape constraint-attrs) - layout-item-values (select-keys shape layout-item-attrs)] + layout-item-values (select-keys shape layout-item-attrs) + + is-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-layout-child? ids)) + is-layout-child? (mf/deref is-layout-child-ref)] [:* [:& measures-menu {:ids ids :type type :values measure-values :shape shape}] - (when has-layout-item - [:& layout-item-menu {:ids ids - :type type - :values layout-item-values - :shape shape}]) + (when is-layout-child? + [:& layout-item-menu + {:ids ids + :type type + :values layout-item-values + :is-layout-child? true + :shape shape}]) [:& constraints-menu {:ids ids :values constraint-values}] [:& layer-menu {:ids ids 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 845db6961..a818eba8f 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 @@ -6,7 +6,7 @@ (ns app.main.ui.workspace.sidebar.options.shapes.circle (:require - [app.main.constants :refer [has-layout-item]] + [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-attrs fill-menu]] @@ -22,20 +22,26 @@ [{:keys [shape] :as props}] (let [ids [(:id shape)] type (:type shape) + measure-values (select-keys shape measure-attrs) stroke-values (select-keys shape stroke-attrs) layer-values (select-keys shape layer-attrs) constraint-values (select-keys shape constraint-attrs) - layout-item-values (select-keys shape layout-item-attrs)] + layout-item-values (select-keys shape layout-item-attrs) + + is-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-layout-child? ids)) + is-layout-child? (mf/deref is-layout-child-ref)] [:* [:& measures-menu {:ids ids :type type :values measure-values :shape shape}] - (when has-layout-item + (when is-layout-child? [:& layout-item-menu {:ids ids :type type :values layout-item-values + :is-layout-child? true + :is-layout-container? false :shape shape}]) [:& constraints-menu {:ids ids :values constraint-values}] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs index 0c7ab8041..6a6957c25 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs @@ -6,7 +6,8 @@ (ns app.main.ui.workspace.sidebar.options.shapes.frame (:require - [app.main.constants :refer [has-layout-item]] + [app.main.refs :as refs] + [app.main.ui.features :as features] [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-shape fill-menu]] @@ -23,12 +24,18 @@ [{:keys [shape] :as props}] (let [ids [(:id shape)] type (:type shape) + + layout-active? (features/use-feature :auto-layout) + stroke-values (select-keys shape stroke-attrs) layer-values (select-keys shape layer-attrs) measure-values (select-keys shape measure-attrs) constraint-values (select-keys shape constraint-attrs) layout-container-values (select-keys shape layout-container-attrs) - layout-item-values (select-keys shape layout-item-attrs)] + layout-item-values (select-keys shape layout-item-attrs) + + is-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-layout-child? ids)) + is-layout-child? (mf/deref is-layout-child-ref)] [:* [:& measures-menu {:ids [(:id shape)] :values measure-values @@ -36,13 +43,19 @@ :shape shape}] [:& constraints-menu {:ids ids :values constraint-values}] - [:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values}] - - (when has-layout-item - [:& layout-item-menu {:ids ids - :type type - :values layout-item-values - :shape shape}]) + (when layout-active? + [:* + [:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values}] + + (when (or (:layout shape) is-layout-child?) + [:& layout-item-menu + {:ids ids + :type type + :values layout-item-values + :is-layout-child? is-layout-child? + :is-layout-container? (:layout shape) + :shape shape}])]) + [:& 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 afd61f9ca..b8697be19 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 @@ -7,14 +7,13 @@ (ns app.main.ui.workspace.sidebar.options.shapes.group (:require [app.common.data :as d] - [app.main.constants :refer [has-layout-item]] + [app.main.refs :as refs] [app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]] [app.main.ui.workspace.sidebar.options.menus.color-selection :refer [color-selection-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.layout-container :refer [layout-container-menu]] [app.main.ui.workspace.sidebar.options.menus.layout-item :refer [layout-item-menu]] [app.main.ui.workspace.sidebar.options.menus.measures :refer [measures-menu]] [app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]] @@ -34,6 +33,10 @@ objects (->> shape-with-children (group-by :id) (d/mapm (fn [_ v] (first v)))) file-id (unchecked-get props "file-id") + ids [(:id shape)] + is-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-layout-child? ids)) + is-layout-child? (mf/deref is-layout-child-ref) + type :group [measure-ids measure-values] (get-attrs [shape] objects :measure) [layer-ids layer-values] (get-attrs [shape] objects :layer) @@ -45,17 +48,20 @@ [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)] - [layout-ids layout-values] (get-attrs [shape] objects :layout) - [layout-item-ids layout-item-values] (get-attrs [shape] objects :layout-item) - ] + [layout-item-ids layout-item-values] (get-attrs [shape] objects :layout-item)] [:div.options [:& measures-menu {:type type :ids measure-ids :values measure-values :shape shape}] [:& component-menu {:ids comp-ids :values comp-values :shape-name (:name shape)}] - [:& layout-container-menu {:type type :ids layout-ids :values layout-values}] - (when has-layout-item - [:& layout-item-menu {:type type :ids layout-item-ids :values layout-item-values}]) + (when is-layout-child? + [:& layout-item-menu + {:type type + :ids layout-item-ids + :is-layout-child? true + :is-layout-container? false + :values layout-item-values}]) + [:& constraints-menu {:ids constraint-ids :values constraint-values}] [:& layer-menu {:type type :ids layer-ids :values layer-values}] 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 b6d37e3a5..667bbb555 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 @@ -6,7 +6,7 @@ (ns app.main.ui.workspace.sidebar.options.shapes.image (:require - [app.main.constants :refer [has-layout-item]] + [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-attrs fill-menu]] @@ -21,22 +21,28 @@ [{:keys [shape] :as props}] (let [ids [(:id shape)] 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) - layout-item-values (select-keys shape layout-item-attrs)] + layout-item-values (select-keys shape layout-item-attrs) + + is-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-layout-child? ids)) + is-layout-child? (mf/deref is-layout-child-ref)] [:* [:& measures-menu {:ids ids :type type :values measure-values :shape shape}] - (when has-layout-item - [:& layout-item-menu {:ids ids - :type type - :values layout-item-values - :shape shape}]) + (when is-layout-child? + [:& layout-item-menu + {:ids ids + :type type + :values layout-item-values + :is-layout-child? true + :shape shape}]) [:& constraints-menu {:ids ids :values constraint-values}] 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 d409eb8b1..0b1896be3 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 @@ -11,7 +11,7 @@ [app.common.geom.shapes :as gsh] [app.common.pages.common :as cpc] [app.common.text :as txt] - [app.main.constants :refer [has-layout-item]] + [app.main.refs :as refs] [app.main.ui.hooks :as hooks] [app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-attrs blur-menu]] [app.main.ui.workspace.sidebar.options.menus.color-selection :refer [color-selection-menu]] @@ -247,6 +247,10 @@ type :multiple all-types (into #{} (map :type shapes)) + ids (->> shapes (map :id)) + is-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-layout-child? ids)) + is-layout-child? (mf/deref is-layout-child-ref) + has-text? (contains? all-types :text) [measure-ids measure-values] (get-attrs shapes objects :measure) @@ -284,10 +288,16 @@ (when-not (empty? measure-ids) [:& measures-menu {:type type :all-types all-types :ids measure-ids :values measure-values :shape shapes}]) - [:& layout-container-menu {:type type :ids layout-ids :values layout-container-values}] + (when (:layout layout-container-values) + [:& layout-container-menu {:type type :ids layout-ids :values layout-container-values}]) - (when has-layout-item - [:& layout-item-menu {:type type :ids layout-item-ids :values layout-item-values}]) + (when is-layout-child? + [:& layout-item-menu + {:type type + :ids layout-item-ids + :is-layout-child? true + :is-layout-container? true + :values layout-item-values}]) (when-not (empty? constraint-ids) [:& constraints-menu {:ids constraint-ids :values constraint-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 b7f4265fa..247b550ba 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 @@ -6,7 +6,7 @@ (ns app.main.ui.workspace.sidebar.options.shapes.path (:require - [app.main.constants :refer [has-layout-item]] + [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-attrs fill-menu]] @@ -22,20 +22,26 @@ [{:keys [shape] :as props}] (let [ids [(:id shape)] type (:type shape) + measure-values (select-keys shape measure-attrs) stroke-values (select-keys shape stroke-attrs) layer-values (select-keys shape layer-attrs) constraint-values (select-keys shape constraint-attrs) - layout-item-values (select-keys shape layout-item-attrs)] + layout-item-values (select-keys shape layout-item-attrs) + + is-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-layout-child? ids)) + is-layout-child? (mf/deref is-layout-child-ref)] [:* [:& measures-menu {:ids ids :type type :values measure-values :shape shape}] - (when has-layout-item + (when is-layout-child? [:& layout-item-menu {:ids ids :type type :values layout-item-values + :is-layout-child? true + :is-layout-container? false :shape shape}]) [:& constraints-menu {:ids ids :values constraint-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 49773a069..4c16b9fe0 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 @@ -6,7 +6,7 @@ (ns app.main.ui.workspace.sidebar.options.shapes.rect (:require - [app.main.constants :refer [has-layout-item]] + [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-attrs fill-menu]] @@ -23,22 +23,28 @@ [{:keys [shape] :as props}] (let [ids [(:id shape)] 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) - layout-item-values (select-keys shape layout-item-attrs)] + layout-item-values (select-keys shape layout-item-attrs) + + is-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-layout-child? ids)) + is-layout-child? (mf/deref is-layout-child-ref)] [:* [:& measures-menu {:ids ids :type type :values measure-values :shape shape}] - (when has-layout-item - [:& layout-item-menu {:ids ids - :type type - :values layout-item-values - :shape shape}]) + (when is-layout-child? + [:& layout-item-menu + {:ids ids + :type type + :values layout-item-values + :is-layout-child? true + :shape shape}]) [:& constraints-menu {:ids ids :values constraint-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 331cc6d55..be7fa1ca1 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 @@ -8,7 +8,7 @@ (:require [app.common.colors :as clr] [app.common.data :as d] - [app.main.constants :refer [has-layout-item]] + [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-attrs fill-menu]] @@ -95,12 +95,16 @@ (let [ids [(:id shape)] 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) - layout-item-values (select-keys shape layout-item-attrs)] + layout-item-values (select-keys shape layout-item-attrs) + + is-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-layout-child? ids)) + is-layout-child? (mf/deref is-layout-child-ref)] (when (contains? svg-elements tag) [:* @@ -108,11 +112,13 @@ :type type :values measure-values :shape shape}] - (when has-layout-item - [:& layout-item-menu {:ids ids - :type type - :values layout-item-values - :shape shape}]) + (when is-layout-child? + [:& layout-item-menu + {:ids ids + :type type + :values layout-item-values + :is-layout-child? true + :shape shape}]) [:& constraints-menu {:ids ids :values constraint-values}] 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 98e2e7849..8288a21f9 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 @@ -7,7 +7,6 @@ (ns app.main.ui.workspace.sidebar.options.shapes.text (:require [app.common.data :as d] - [app.main.constants :refer [has-layout-item]] [app.main.data.workspace.texts :as dwt] [app.main.refs :as refs] [app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]] @@ -27,6 +26,8 @@ (let [ids [(:id shape)] type (:type shape) + is-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-layout-child? ids)) + is-layout-child? (mf/deref is-layout-child-ref) state-map (mf/deref refs/workspace-editor-state) shared-libs (mf/deref refs/workspace-libraries) @@ -69,11 +70,14 @@ :type type :values (select-keys shape measure-attrs) :shape shape}] - (when has-layout-item - [:& layout-item-menu {:ids ids - :type type - :values layout-item-values - :shape shape}]) + + (when is-layout-child? + [:& layout-item-menu + {:ids ids + :type type + :values layout-item-values + :is-layout-child? true + :shape shape}]) [:& constraints-menu {:ids ids :values (select-keys shape constraint-attrs)}] diff --git a/frontend/translations/en.po b/frontend/translations/en.po index ad5bec27f..e9bfc9dd3 100644 --- a/frontend/translations/en.po +++ b/frontend/translations/en.po @@ -3503,19 +3503,19 @@ msgid "workspace.options.layout-item.advanced-ops" msgstr "Advanced options" #: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs -msgid "workspace.options.layout-item.max-h" +msgid "workspace.options.layout-item.layout-max-h" msgstr "Max.Height" #: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs -msgid "workspace.options.layout-item.max-w" +msgid "workspace.options.layout-item.layout-max-w" msgstr "Max.Width" #: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs -msgid "workspace.options.layout-item.min-h" +msgid "workspace.options.layout-item.layout-min-h" msgstr "Min.Height" #: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs -msgid "workspace.options.layout-item.min-w" +msgid "workspace.options.layout-item.layout-min-w" msgstr "Min.Width" #: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs @@ -3523,19 +3523,19 @@ msgid "workspace.options.layout-item.title" msgstr "Element resizing" #: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs -msgid "workspace.options.layout-item.title.max-h" +msgid "workspace.options.layout-item.title.layout-max-h" msgstr "Maximum height" #: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs -msgid "workspace.options.layout-item.title.max-w" +msgid "workspace.options.layout-item.title.layout-max-w" msgstr "Maximum width" #: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs -msgid "workspace.options.layout-item.title.min-h" +msgid "workspace.options.layout-item.title.layout-min-h" msgstr "Minimum height" #: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs -msgid "workspace.options.layout-item.title.min-w" +msgid "workspace.options.layout-item.title.layout-min-w" msgstr "Minimum width" #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs @@ -4368,4 +4368,4 @@ msgid "workspace.updates.update" msgstr "Update" msgid "workspace.viewport.click-to-close-path" -msgstr "Click to close the path" \ No newline at end of file +msgstr "Click to close the path" diff --git a/frontend/translations/es.po b/frontend/translations/es.po index f7c366b6a..736e0766a 100644 --- a/frontend/translations/es.po +++ b/frontend/translations/es.po @@ -3661,19 +3661,19 @@ msgid "workspace.options.layout-item.advanced-ops" msgstr "Opciones avanzadas" #: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs -msgid "workspace.options.layout-item.max-h" +msgid "workspace.options.layout-item.layout-max-h" msgstr "AlturaMax." #: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs -msgid "workspace.options.layout-item.max-w" +msgid "workspace.options.layout-item.layout-max-w" msgstr "AnchoMax." #: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs -msgid "workspace.options.layout-item.min-h" +msgid "workspace.options.layout-item.layout-min-h" msgstr "AlturaMin." #: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs -msgid "workspace.options.layout-item.min-w" +msgid "workspace.options.layout-item.layout-min-w" msgstr "AnchoMin." #: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs @@ -3681,19 +3681,19 @@ msgid "workspace.options.layout-item.title" msgstr "Redimensionado de elemento" #: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs -msgid "workspace.options.layout-item.title.max-h" +msgid "workspace.options.layout-item.title.layout-max-h" msgstr "Altura máxima" #: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs -msgid "workspace.options.layout-item.title.max-w" +msgid "workspace.options.layout-item.title.layout-max-w" msgstr "Ancho máximo" #: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs -msgid "workspace.options.layout-item.title.min-h" +msgid "workspace.options.layout-item.title.layout-min-h" msgstr "Altura mínima" #: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs -msgid "workspace.options.layout-item.title.min-w" +msgid "workspace.options.layout-item.title.layout-min-w" msgstr "Ancho mínimo" #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs @@ -4547,4 +4547,4 @@ msgid "workspace.updates.update" msgstr "Actualizar" msgid "workspace.viewport.click-to-close-path" -msgstr "Pulsar para cerrar la ruta" \ No newline at end of file +msgstr "Pulsar para cerrar la ruta"