3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-08-02 14:58:28 +02:00
Code Issues Projects Releases Packages Wiki Activity

🎉 Add packed basic layout positions

Browse source
This commit is contained in:
alonso.torres 2022-07-01 13:19:27 +02:00 • committed by Andrey Antukh
parent aeb8fa1896
commit 1c8aef6fa8
4 changed files with 212 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -19,6 +19,7 @@
[app.main.data.workspace.changes :as dch]
[app.main.data.workspace.edition :as dwe]
[app.main.data.workspace.selection :as dws]
[app.main.data.workspace.shape-layout :as dwsl]
[app.main.data.workspace.state-helpers :as wsh]
[app.main.streams :as ms]
[app.util.names :as un]
@ -98,6 +99,7 @@
(rx/concat
(rx/of (dch/commit-changes changes)
(dwsl/update-layout-positions [(:parent-id shape)])
(when-not no-select?
(dws/select-shapes (d/ordered-set id))))
(when (= :text (:type attrs))
@ -239,7 +241,8 @@
flows
starting-flows)))))]
(rx/of (dch/commit-changes changes))))))
(rx/of (dch/commit-changes changes)
(dwsl/update-layout-positions all-parents))))))
(defn- viewport-center
[state]

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

@ -415,12 +415,12 @@
(cond
(:layout shape)
(let [result
(->> children
(reduce (partial set-layout-child (and snap-pixel? resize-modif?))
(merge {:modif-tree modif-tree}
(gsh/calc-layout-data shape children transformed-rect))))]
(:modif-tree result))
(let [layout-data (gsh/calc-layout-data shape children modif-tree transformed-rect)
children (cond-> children (:reverse? layout-data) reverse)]
(->> children
(reduce (partial set-layout-child (and snap-pixel? resize-modif?))
(merge {:modif-tree modif-tree} layout-data))
:modif-tree))
:else
modif-tree)))]

87
frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs
View file

@ -88,9 +88,11 @@
type (:layout-type values)
is-col? (or (= dir :top)
(= dir :bottom))
saved-pos [(:layout-h-orientation values) (:layout-v-orientation values)]]
saved-pos [(:layout-h-orientation values)
(:layout-v-orientation values)]]
(if (= type :packed)
(cond
(= type :packed)
[:div.orientation-grid
[:div.button-wrapper
(for [[pv ph] grid-pos]
@ -110,47 +112,48 @@
:rotated is-col?)}
(get-layout-icon dir type pv ph)]])]]
(if is-col?
[:div.orientation-grid.col
[:div.button-wrapper
(for [[idx col] (d/enumerate grid-cols)]
[:button.orientation
{:key (dm/str idx col)
:on-click (partial on-change-orientation :top col type)
:class (dom/classnames
:active (= col (second saved-pos))
:top (= :left col)
:centered (= :center col)
:bottom (= :right col))}
[:span.icon
{:class (dom/classnames :rotated is-col?)}
(get-layout-icon dir type nil col)]
[:span.icon
{:class (dom/classnames :rotated is-col?)}
(get-layout-icon dir type nil col)]
[:span.icon
{:class (dom/classnames :rotated is-col?)}
(get-layout-icon dir type nil col)]])]]
is-col?
[:div.orientation-grid.col
[:div.button-wrapper
(for [[idx col] (d/enumerate grid-cols)]
[:button.orientation
{:key (dm/str idx col)
:on-click (partial on-change-orientation :top col type)
:class (dom/classnames
:active (= col (second saved-pos))
:top (= :left col)
:centered (= :center col)
:bottom (= :right col))}
[:span.icon
{:class (dom/classnames :rotated is-col?)}
(get-layout-icon dir type nil col)]
[:span.icon
{:class (dom/classnames :rotated is-col?)}
(get-layout-icon dir type nil col)]
[:span.icon
{:class (dom/classnames :rotated is-col?)}
(get-layout-icon dir type nil col)]])]]
[:div.orientation-grid.row
[:div.button-wrapper
(for [row grid-rows]
[:button.orientation
{:on-click (partial on-change-orientation row :left type)
:class (dom/classnames
:active (= row (first saved-pos))
:top (= :top row)
:centered (= :center row)
:bottom (= :bottom row))}
[:span.icon
{:class (dom/classnames :rotated is-col?)}
(get-layout-icon dir type row nil)]
[:span.icon
{:class (dom/classnames :rotated is-col?)}
(get-layout-icon dir type row nil)]
[:span.icon
{:class (dom/classnames :rotated is-col?)}
(get-layout-icon dir type row nil)]])]]))))
:else
[:div.orientation-grid.row
[:div.button-wrapper
(for [row grid-rows]
[:button.orientation
{:on-click (partial on-change-orientation row :left type)
:class (dom/classnames
:active (= row (first saved-pos))
:top (= :top row)
:centered (= :center row)
:bottom (= :bottom row))}
[:span.icon
{:class (dom/classnames :rotated is-col?)}
(get-layout-icon dir type row nil)]
[:span.icon
{:class (dom/classnames :rotated is-col?)}
(get-layout-icon dir type row nil)]
[:span.icon
{:class (dom/classnames :rotated is-col?)}
(get-layout-icon dir type row nil)]])]])))
(mf/defc padding-section
[{:keys [values on-change-style on-change] :as props}]