3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-19 21:36:12 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ Allow for absolute positioned elements inside layout

Browse source
This commit is contained in:
alonso.torres 2023-02-23 13:02:40 +01:00 • committed by Alejandro Alonso
parent 664f73b8a5
commit f3f1dbc2d1
25 changed files with 202 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

4
frontend/src/app/main/data/workspace.cljs
View file

@ -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

2
frontend/src/app/main/data/workspace/bool.cljs
View file

@ -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)))))))))

4
frontend/src/app/main/data/workspace/groups.cljs
View file

@ -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)]))))

2
frontend/src/app/main/data/workspace/shapes.cljs
View file

@ -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)

4
frontend/src/app/main/data/workspace/transforms.cljs
View file

@ -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."

1
frontend/src/app/main/ui/icons.cljs
View file

@ -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))

10
frontend/src/app/main/ui/workspace/sidebar/layers.cljs
View file

@ -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

24
frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
View file

@ -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?

7
frontend/src/app/main/ui/workspace/sidebar/options/shapes/bool.cljs
View file

@ -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

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

@ -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

5
frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs
View file

@ -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}]

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

@ -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)

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

@ -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}])

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

@ -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

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

@ -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}])

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

@ -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}])

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

@ -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)}])