From f3f1dbc2d1b0a4614a7e71dc4d453c84abfe8e56 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Thu, 23 Feb 2023 13:02:40 +0100 Subject: [PATCH] :sparkles: Allow for absolute positioned elements inside layout --- CHANGES.md | 1 + .../app/common/geom/shapes/constraints.cljc | 4 +- .../src/app/common/geom/shapes/modifiers.cljc | 32 ++++++++---- common/src/app/common/pages/common.cljc | 4 +- common/src/app/common/types/shape/layout.cljc | 49 ++++++++++++++++++- .../images/icons/position-absolute.svg | 3 ++ .../partials/sidebar-element-options.scss | 5 +- .../styles/main/partials/sidebar-layers.scss | 44 ++++++++++++++--- frontend/src/app/main/data/workspace.cljs | 4 ++ .../src/app/main/data/workspace/bool.cljs | 2 + .../src/app/main/data/workspace/groups.cljs | 4 ++ .../src/app/main/data/workspace/shapes.cljs | 2 + .../app/main/data/workspace/transforms.cljs | 4 +- frontend/src/app/main/ui/icons.cljs | 1 + .../app/main/ui/workspace/sidebar/layers.cljs | 10 ++-- .../sidebar/options/menus/layout_item.cljs | 24 ++++++++- .../sidebar/options/shapes/bool.cljs | 7 ++- .../sidebar/options/shapes/circle.cljs | 7 ++- .../sidebar/options/shapes/frame.cljs | 5 +- .../sidebar/options/shapes/group.cljs | 5 +- .../sidebar/options/shapes/image.cljs | 6 ++- .../sidebar/options/shapes/path.cljs | 6 ++- .../sidebar/options/shapes/rect.cljs | 6 ++- .../sidebar/options/shapes/svg_raw.cljs | 6 ++- .../sidebar/options/shapes/text.cljs | 4 +- 25 files changed, 202 insertions(+), 43 deletions(-) create mode 100644 frontend/resources/images/icons/position-absolute.svg diff --git a/CHANGES.md b/CHANGES.md index 751e755d0..7bab4fc2f 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -9,6 +9,7 @@ - Adds paddings and gaps prediction on layout creation [Taiga #4838](https://tree.taiga.io/project/penpot/task/4838) - Add visual feedback when proportionally scaling text elements with **K** [Taiga #3415](https://tree.taiga.io/project/penpot/us/3415) - Add visualization and mouse control to paddings in frames with layout [Taiga #4839](https://tree.taiga.io/project/penpot/task/4839) +- Allow for absolute positioned elements inside layout [Taiga #4834](https://tree.taiga.io/project/penpot/us/4834) ### :bug: Bugs fixed diff --git a/common/src/app/common/geom/shapes/constraints.cljc b/common/src/app/common/geom/shapes/constraints.cljc index 6c4f24cc3..3f40a9d0a 100644 --- a/common/src/app/common/geom/shapes/constraints.cljc +++ b/common/src/app/common/geom/shapes/constraints.cljc @@ -288,7 +288,7 @@ constraints-h (cond - (ctl/layout? parent) + (and (ctl/layout? parent) (not (ctl/layout-absolute? child))) :left (not ignore-constraints) @@ -299,7 +299,7 @@ constraints-v (cond - (ctl/layout? parent) + (and (ctl/layout? parent) (not (ctl/layout-absolute? child))) :top (not ignore-constraints) diff --git a/common/src/app/common/geom/shapes/modifiers.cljc b/common/src/app/common/geom/shapes/modifiers.cljc index d14f5aaa3..8e7d40704 100644 --- a/common/src/app/common/geom/shapes/modifiers.cljc +++ b/common/src/app/common/geom/shapes/modifiers.cljc @@ -94,9 +94,8 @@ (defn- set-children-modifiers "Propagates the modifiers from a parent too its children applying constraints if necesary" - [modif-tree objects bounds parent transformed-parent-bounds ignore-constraints] - (let [children (:shapes parent) - modifiers (dm/get-in modif-tree [(:id parent) :modifiers])] + [modif-tree children objects bounds parent transformed-parent-bounds ignore-constraints] + (let [modifiers (dm/get-in modif-tree [(:id parent) :modifiers])] ;; Move modifiers don't need to calculate constraints (if (ctm/only-move? modifiers) @@ -155,7 +154,7 @@ (gtr/transform-bounds modifiers))))) (defn- set-layout-modifiers - [modif-tree objects bounds parent transformed-parent-bounds] + [modif-tree children objects bounds parent transformed-parent-bounds] (letfn [(apply-modifiers [child] [(-> (get-group-bounds objects bounds modif-tree child) @@ -173,7 +172,8 @@ [layout-line modif-tree]))] - (let [children (->> (cph/get-immediate-children objects (:id parent)) + (let [children (->> children + (map (d/getf objects)) (remove :hidden) (map apply-modifiers)) layout-data (gcl/calc-layout-data parent children @transformed-parent-bounds) @@ -235,6 +235,7 @@ "Propagate modifiers to its children" [objects bounds ignore-constraints modif-tree parent] (let [parent-id (:id parent) + children (:shapes parent) root? (= uuid/zero parent-id) modifiers (-> (dm/get-in modif-tree [parent-id :modifiers]) (ctm/select-geometry)) @@ -244,7 +245,7 @@ (cond-> modif-tree (and has-modifiers? parent? (not root?)) - (set-children-modifiers objects bounds parent transformed-parent-bounds ignore-constraints)))) + (set-children-modifiers children objects bounds parent transformed-parent-bounds ignore-constraints)))) (defn- propagate-modifiers-layout "Propagate modifiers to its children" @@ -258,14 +259,25 @@ auto? (or (ctl/auto-height? parent) (ctl/auto-width? parent)) parent? (or (cph/group-like-shape? parent) (cph/frame-shape? parent)) - transformed-parent-bounds (delay (gtr/transform-bounds @(get bounds parent-id) modifiers))] + transformed-parent-bounds (delay (gtr/transform-bounds @(get bounds parent-id) modifiers)) + + children-modifiers + (if layout? + (->> (:shapes parent) + (filter #(ctl/layout-absolute? objects %))) + (:shapes parent)) + + children-layout + (when layout? + (->> (:shapes parent) + (remove #(ctl/layout-absolute? objects %))))] [(cond-> modif-tree - (and (not layout?) has-modifiers? parent? (not root?)) - (set-children-modifiers objects bounds parent transformed-parent-bounds ignore-constraints) + (and has-modifiers? parent? (not root?)) + (set-children-modifiers children-modifiers objects bounds parent transformed-parent-bounds ignore-constraints) layout? - (set-layout-modifiers objects bounds parent transformed-parent-bounds)) + (set-layout-modifiers children-layout objects bounds parent transformed-parent-bounds)) ;; Auto-width/height can change the positions in the parent so we need to recalculate (cond-> autolayouts auto? (conj (:id parent)))])) diff --git a/common/src/app/common/pages/common.cljc b/common/src/app/common/pages/common.cljc index 7e392cc92..4513a97e8 100644 --- a/common/src/app/common/pages/common.cljc +++ b/common/src/app/common/pages/common.cljc @@ -198,7 +198,9 @@ :layout-item-min-h :layout-item-max-w :layout-item-min-w - :layout-item-align-self} + :layout-item-align-self + :layout-item-absolute + :layout-item-z-index} :rect #{:proportion-lock :width :height diff --git a/common/src/app/common/types/shape/layout.cljc b/common/src/app/common/types/shape/layout.cljc index d7ecec795..3d9872d18 100644 --- a/common/src/app/common/types/shape/layout.cljc +++ b/common/src/app/common/types/shape/layout.cljc @@ -30,6 +30,8 @@ ;; :layout-item-min-h ;; num ;; :layout-item-max-w ;; num ;; :layout-item-min-w ;; num +;; :layout-item-absolute +;; :layout-item-z-index (s/def ::layout #{:flex :grid}) (s/def ::layout-flex-dir #{:row :reverse-row :row-reverse :column :reverse-column :column-reverse}) ;;TODO remove reverse-column and reverse-row after script @@ -82,6 +84,8 @@ (s/def ::layout-item-min-h ::us/safe-number) (s/def ::layout-item-max-w ::us/safe-number) (s/def ::layout-item-min-w ::us/safe-number) +(s/def ::layout-item-absolute boolean?) +(s/def ::layout-item-z-index ::us/safe-integer) (s/def ::layout-child-props (s/keys :opt-un [::layout-item-margin @@ -92,7 +96,9 @@ ::layout-item-min-h ::layout-item-max-w ::layout-item-min-w - ::layout-item-align-self])) + ::layout-item-align-self + ::layout-item-absolute + ::layout-item-z-index])) (defn layout? ([objects id] @@ -357,3 +363,44 @@ (some (partial fill-height? objects) children-ids)) (and (row? objects frame-id) (every? (partial fill-height? objects) children-ids))))) + +(defn layout-absolute? + ([objects id] + (layout-absolute? (get objects id))) + ([shape] + (true? (:layout-item-absolute shape)))) + +(defn layout-z-index + ([objects id] + (layout-z-index (get objects id))) + ([shape] + (or (:layout-item-z-index shape) 0))) + +(defn remove-layout-container-data + [shape] + (dissoc shape + :layout + :layout-flex-dir + :layout-gap + :layout-gap-type + :layout-wrap-type + :layout-padding-type + :layout-padding + :layout-justify-content + :layout-align-items + :layout-align-content)) + +(defn remove-layout-item-data + [shape] + (dissoc shape + :layout-item-margin + :layout-item-margin-type + :layout-item-h-sizing + :layout-item-v-sizing + :layout-item-max-h + :layout-item-min-h + :layout-item-max-w + :layout-item-min-w + :layout-item-align-self + :layout-item-absolute + :layout-item-z-index)) diff --git a/frontend/resources/images/icons/position-absolute.svg b/frontend/resources/images/icons/position-absolute.svg new file mode 100644 index 000000000..067d77864 --- /dev/null +++ b/frontend/resources/images/icons/position-absolute.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/styles/main/partials/sidebar-element-options.scss b/frontend/resources/styles/main/partials/sidebar-element-options.scss index 2f2f07b75..c77bfa0f0 100644 --- a/frontend/resources/styles/main/partials/sidebar-element-options.scss +++ b/frontend/resources/styles/main/partials/sidebar-element-options.scss @@ -1672,7 +1672,8 @@ .align-self-style, .justify-content-style, .align-content-style, - .layout-behavior { + .layout-behavior, + .absolute { display: flex; border-radius: $br4; border: 1px solid $color-gray-60; @@ -1693,8 +1694,10 @@ border: none; cursor: pointer; border-right: 1px solid $color-gray-60; + color: $color-gray-20; &.active, &:hover { + color: $color-primary; svg { fill: $color-primary; } diff --git a/frontend/resources/styles/main/partials/sidebar-layers.scss b/frontend/resources/styles/main/partials/sidebar-layers.scss index c3bc77841..7553e49e3 100644 --- a/frontend/resources/styles/main/partials/sidebar-layers.scss +++ b/frontend/resources/styles/main/partials/sidebar-layers.scss @@ -13,12 +13,44 @@ transition: none; width: 100%; - svg { - fill: $color-gray-20; - height: 13px; - flex-shrink: 0; - margin-right: 8px; - width: 13px; + .icon { + position: relative; + display: flex; + align-items: center; + justify-content: center; + margin-right: 4px; + margin-bottom: 3px; + width: 18px; + height: 18px; + + svg { + fill: $color-gray-20; + height: 12px; + width: 12px; + } + + & .absolute { + position: absolute; + top: 0; + left: 0; + width: 18px; + height: 18px; + + svg { + width: 18px; + height: 18px; + fill: $color-gray-20; + fill-opacity: 0.3; + } + } + } + + &.selected .icon .absolute svg { + fill: $color-primary; + } + + &:hover .icon .absolute svg { + fill: $color-gray-60; } &.group { diff --git a/frontend/src/app/main/data/workspace.cljs b/frontend/src/app/main/data/workspace.cljs index e8a115702..d4e781d62 100644 --- a/frontend/src/app/main/data/workspace.cljs +++ b/frontend/src/app/main/data/workspace.cljs @@ -651,6 +651,10 @@ (-> (pcb/empty-changes it page-id) (pcb/with-objects objects) + ;; Remove layout-item properties when moving a shape outside a layout + (cond-> (not (ctl/layout? objects parent-id)) + (pcb/update-shapes ordered-indexes ctl/remove-layout-item-data)) + ;; Move the shapes (pcb/change-parent parent-id shapes diff --git a/frontend/src/app/main/data/workspace/bool.cljs b/frontend/src/app/main/data/workspace/bool.cljs index b9a5be4d8..2b7871261 100644 --- a/frontend/src/app/main/data/workspace/bool.cljs +++ b/frontend/src/app/main/data/workspace/bool.cljs @@ -11,6 +11,7 @@ [app.common.pages.changes-builder :as pcb] [app.common.pages.helpers :as cph] [app.common.path.shapes-to-path :as stp] + [app.common.types.shape.layout :as ctl] [app.common.uuid :as uuid] [app.main.data.workspace.changes :as dch] [app.main.data.workspace.selection :as dws] @@ -98,6 +99,7 @@ changes (-> (pcb/empty-changes it page-id) (pcb/with-objects objects) (pcb/add-object boolean-data {:index index}) + (pcb/update-shapes (map :id shapes) ctl/remove-layout-item-data) (pcb/change-parent shape-id shapes))] (rx/of (dch/commit-changes changes) (dws/select-shapes (d/ordered-set shape-id))))))))) diff --git a/frontend/src/app/main/data/workspace/groups.cljs b/frontend/src/app/main/data/workspace/groups.cljs index cbe0558ba..bbdaf1045 100644 --- a/frontend/src/app/main/data/workspace/groups.cljs +++ b/frontend/src/app/main/data/workspace/groups.cljs @@ -12,6 +12,7 @@ [app.common.pages.helpers :as cph] [app.common.types.component :as ctk] [app.common.types.shape :as cts] + [app.common.types.shape.layout :as ctl] [app.main.data.workspace.changes :as dch] [app.main.data.workspace.selection :as dws] [app.main.data.workspace.state-helpers :as wsh] @@ -98,6 +99,7 @@ changes (-> (pcb/empty-changes it page-id) (pcb/with-objects objects) (pcb/add-object group {:index group-idx}) + (pcb/update-shapes (map :id shapes) ctl/remove-layout-item-data) (pcb/change-parent (:id group) (reverse shapes)) (pcb/update-shapes (map :id shapes-to-detach) ctk/detach-shape) (pcb/remove-objects ids-to-delete))] @@ -142,6 +144,8 @@ (-> (pcb/empty-changes it page-id) (pcb/with-objects objects) + (cond-> (ctl/layout? frame) + (pcb/update-shapes (:shapes frame) ctl/remove-layout-item-data)) (pcb/change-parent parent-id children idx-in-parent) (pcb/remove-objects [(:id frame)])))) diff --git a/frontend/src/app/main/data/workspace/shapes.cljs b/frontend/src/app/main/data/workspace/shapes.cljs index 356724254..326849ed0 100644 --- a/frontend/src/app/main/data/workspace/shapes.cljs +++ b/frontend/src/app/main/data/workspace/shapes.cljs @@ -131,6 +131,8 @@ (when (d/not-empty? to-move-shapes) (-> (pcb/empty-changes it page-id) (pcb/with-objects objects) + (cond-> (not (ctl/layout? objects frame-id)) + (pcb/update-shapes ordered-indexes ctl/remove-layout-item-data)) (pcb/change-parent frame-id to-move-shapes 0)))] (if (some? changes) diff --git a/frontend/src/app/main/data/workspace/transforms.cljs b/frontend/src/app/main/data/workspace/transforms.cljs index 5a62a135f..72b05c104 100644 --- a/frontend/src/app/main/data/workspace/transforms.cljs +++ b/frontend/src/app/main/data/workspace/transforms.cljs @@ -729,13 +729,15 @@ changes (-> (pcb/empty-changes it page-id) (pcb/with-objects objects) + ;; Remove layout-item properties when moving a shape outside a layout + (cond-> (not (ctl/layout? objects frame-id)) + (pcb/update-shapes (map :id moving-shapes) ctl/remove-layout-item-data)) (pcb/change-parent frame-id moving-shapes drop-index) (pcb/remove-objects empty-parents))] (when (and (some? frame-id) (d/not-empty? changes)) (rx/of (dch/commit-changes changes) (dwc/expand-collapse frame-id))))))) - (defn- get-displacement "Retrieve the correct displacement delta point for the provided direction speed and distances thresholds." diff --git a/frontend/src/app/main/ui/icons.cljs b/frontend/src/app/main/ui/icons.cljs index b52b8fb41..e7427a13e 100644 --- a/frontend/src/app/main/ui/icons.cljs +++ b/frontend/src/app/main/ui/icons.cljs @@ -185,6 +185,7 @@ (def play (icon-xref :play)) (def plus (icon-xref :plus)) (def pointer-inner (icon-xref :pointer-inner)) +(def position-absolute (icon-xref :position-absolute)) (def position-bottom-center (icon-xref :position-bottom-center)) (def position-bottom-left (icon-xref :position-bottom-left)) (def position-bottom-right (icon-xref :position-bottom-right)) diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs index d7f61a31d..39cfc501b 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs @@ -9,6 +9,7 @@ [app.common.data :as d] [app.common.data.macros :as dm] [app.common.pages.helpers :as cph] + [app.common.types.shape.layout :as ctl] [app.common.uuid :as uuid] [app.main.data.workspace :as dw] [app.main.data.workspace.collapse :as dwc] @@ -101,6 +102,7 @@ selected? (contains? selected id) container? (or (cph/frame-shape? item) (cph/group-shape? item)) + absolute? (ctl/layout-absolute? item) components-v2 (mf/use-ctx ctx/components-v2) workspace-read-only? (mf/use-ctx ctx/workspace-read-only?) @@ -253,9 +255,11 @@ :on-pointer-enter on-pointer-enter :on-pointer-leave on-pointer-leave :on-double-click #(dom/stop-propagation %)} - [:div {:on-double-click #(do (dom/stop-propagation %) - (dom/prevent-default %) - (st/emit! dw/zoom-to-selected-shape))} + [:div.icon {:on-double-click #(do (dom/stop-propagation %) + (dom/prevent-default %) + (st/emit! dw/zoom-to-selected-shape))} + (when absolute? + [:div.absolute i/position-absolute]) [:& si/element-icon {:shape item :main-instance? main-instance?}]] [:& layer-name {:shape item 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 af4f796d2..1481d222f 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 @@ -29,7 +29,8 @@ :layout-item-max-w ;; num :layout-item-min-w ;; num :layout-item-align-self ;; :start :end :center :stretch :baseline - ]) + :layout-item-absolute + :layout-item-z-index]) (mf/defc margin-section [{:keys [values change-margin-style on-margin-change] :as props}] @@ -193,13 +194,32 @@ on-size-change (fn [measure value] - (st/emit! (dwsl/update-layout-child ids {measure value})))] + (st/emit! (dwsl/update-layout-child ids {measure value}))) + + on-change-position + (fn [value] + (st/emit! (dwsl/update-layout-child ids {:layout-item-absolute (= value :absolute)})))] [:div.element-set [:div.element-set-title [:span "Flex elements"]] [:div.element-set-content.layout-item-menu + [:div.layout-row + [:div.row-title.sizing "Position"] + [:div.btn-wrapper + [:div.absolute + [:button.behavior-btn.tooltip.tooltip-bottom + {:alt "Static" + :class (dom/classnames :active (not (:layout-item-absolute values))) + :on-click #(on-change-position :static)} + "Static"] + [:button.behavior-btn.tooltip.tooltip-bottom + {:alt "Absolute" + :class (dom/classnames :active (and (:layout-item-absolute values) (not= :multiple (:layout-item-absolute values)))) + :on-click #(on-change-position :absolute)} + "Absolute"]]]] + [:div.layout-row [:div.row-title.sizing "Sizing"] [:& element-behavior {:is-layout-child? is-layout-child? 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 f386b58a6..9803d57c6 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,6 +6,7 @@ (ns app.main.ui.workspace.sidebar.options.shapes.bool (:require + [app.common.types.shape.layout :as ctl] [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]] @@ -30,7 +31,9 @@ layout-container-values (select-keys shape layout-container-flex-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)] + is-layout-child? (mf/deref is-layout-child-ref) + + is-layout-child-absolute? (ctl/layout-absolute? shape)] [:* [:& measures-menu {:ids ids :type type @@ -46,7 +49,7 @@ :is-layout-child? true :shape shape}]) - (when (not is-layout-child?) + (when (or (not is-layout-child?) is-layout-child-absolute?) [:& 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 6e0a78ebf..44146155f 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,6 +6,7 @@ (ns app.main.ui.workspace.sidebar.options.shapes.circle (:require + [app.common.types.shape.layout :as ctl] [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]] @@ -32,7 +33,9 @@ layout-container-values (select-keys shape layout-container-flex-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)] + is-layout-child? (mf/deref is-layout-child-ref) + + is-layout-child-absolute? (ctl/layout-absolute? shape)] [:* [:& measures-menu {:ids ids :type type @@ -47,7 +50,7 @@ :is-layout-child? true :is-layout-container? false :shape shape}]) - (when (not is-layout-child?) + (when (or (not is-layout-child?) is-layout-child-absolute?) [:& constraints-menu {:ids ids :values constraint-values}]) [:& layer-menu {:ids ids 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 6656c66bc..ebbb5b618 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 @@ -38,7 +38,8 @@ is-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-layout-child? ids)) is-layout-child? (mf/deref is-layout-child-ref) - is-layout-container? (ctl/layout? shape)] + is-layout-container? (ctl/layout? shape) + is-layout-child-absolute? (ctl/layout-absolute? shape)] [:* [:& measures-menu {:ids [(:id shape)] :values measure-values @@ -47,7 +48,7 @@ [:& component-menu {:ids comp-ids :values comp-values :shape-name (:name shape)}] - (when (not is-layout-child?) + (when (or (not is-layout-child?) is-layout-child-absolute?) [:& constraints-menu {:ids ids :values constraint-values}]) [:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values :multiple false}] 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 016e4742d..7b336181a 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,6 +7,7 @@ (ns app.main.ui.workspace.sidebar.options.shapes.group (:require [app.common.data :as d] + [app.common.types.shape.layout :as ctl] [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]] @@ -37,6 +38,7 @@ 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) + is-layout-child-absolute? (ctl/layout-absolute? shape) type :group [measure-ids measure-values] (get-attrs [shape] objects :measure) @@ -64,8 +66,9 @@ :is-layout-container? false :values layout-item-values}]) - (when (not is-layout-child?) + (when (or (not is-layout-child?) is-layout-child-absolute?) [:& 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 862dba587..0f3bf75fb 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,6 +6,7 @@ (ns app.main.ui.workspace.sidebar.options.shapes.image (:require + [app.common.types.shape.layout :as ctl] [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]] @@ -32,7 +33,8 @@ layout-container-values (select-keys shape layout-container-flex-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)] + is-layout-child? (mf/deref is-layout-child-ref) + is-layout-child-absolute? (ctl/layout-absolute? shape)] [:* [:& measures-menu {:ids ids :type type @@ -48,7 +50,7 @@ :is-layout-child? true :shape shape}]) - (when (not is-layout-child?) + (when (or (not is-layout-child?) is-layout-child-absolute?) [:& constraints-menu {:ids 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 c1803daa6..28494c225 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,6 +6,7 @@ (ns app.main.ui.workspace.sidebar.options.shapes.path (:require + [app.common.types.shape.layout :as ctl] [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]] @@ -32,7 +33,8 @@ layout-container-values (select-keys shape layout-container-flex-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)] + is-layout-child? (mf/deref is-layout-child-ref) + is-layout-child-absolute? (ctl/layout-absolute? shape)] [:* [:& measures-menu {:ids ids :type type @@ -47,7 +49,7 @@ :is-layout-child? true :is-layout-container? false :shape shape}]) - (when (not is-layout-child?) + (when (or (not is-layout-child?) is-layout-child-absolute?) [:& constraints-menu {:ids ids :values constraint-values}]) [:& layer-menu {:ids ids 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 e133f7a22..5ee633fcf 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,6 +6,7 @@ (ns app.main.ui.workspace.sidebar.options.shapes.rect (:require + [app.common.types.shape.layout :as ctl] [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]] @@ -32,7 +33,8 @@ layout-item-values (select-keys shape layout-item-attrs) layout-container-values (select-keys shape layout-container-flex-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)] + is-layout-child? (mf/deref is-layout-child-ref) + is-layout-child-absolute? (ctl/layout-absolute? shape)] [:* [:& measures-menu {:ids ids :type type @@ -47,7 +49,7 @@ :is-layout-child? true :shape shape}]) - (when (not is-layout-child?) + (when (or (not is-layout-child?) is-layout-child-absolute?) [:& 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 bae854679..a8ec66fb9 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,6 +8,7 @@ (:require [app.common.colors :as clr] [app.common.data :as d] + [app.common.types.shape.layout :as ctl] [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]] @@ -106,7 +107,8 @@ layout-container-values (select-keys shape layout-container-flex-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)] + is-layout-child? (mf/deref is-layout-child-ref) + is-layout-child-absolute? (ctl/layout-absolute? shape)] (when (contains? svg-elements tag) [:* @@ -124,7 +126,7 @@ :is-layout-child? true :shape shape}]) - (when (not is-layout-child?) + (when (or (not is-layout-child?) is-layout-child-absolute?) [:& 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 3437d4a8a..6bfcb5dda 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,6 +7,7 @@ (ns app.main.ui.workspace.sidebar.options.shapes.text (:require [app.common.data :as d] + [app.common.types.shape.layout :as ctl] [app.main.data.workspace.texts :as dwt :refer [text-fill-attrs root-attrs paragraph-attrs text-attrs]] [app.main.refs :as refs] [app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]] @@ -30,6 +31,7 @@ is-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-layout-child? ids)) is-layout-child? (mf/deref is-layout-child-ref) layout-container-values (select-keys shape layout-container-flex-attrs) + is-layout-child-absolute? (ctl/layout-absolute? shape) state-map (mf/deref refs/workspace-editor-state) shared-libs (mf/deref refs/workspace-libraries) @@ -82,7 +84,7 @@ :is-layout-child? true :shape shape}]) - (when (not is-layout-child?) + (when (or (not is-layout-child?) is-layout-child-absolute?) [:& constraints-menu {:ids ids :values (select-keys shape constraint-attrs)}])