Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-24 15:39:50 -05:00
Code Issues Activity

🐛 Fix fill inside grid layout

Browse source
This commit is contained in:
alonso.torres 2023-10-06 14:05:22 +02:00
parent 0468b6acca
commit 59bd9c132e
4 changed files with 57 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

76
common/src/app/common/geom/shapes/flex_layout/bounds.cljc
View file

@ -27,7 +27,7 @@
(defn child-layout-bound-points
"Returns the bounds of the children as points"
[parent child parent-bounds child-bounds bounds objects]
[parent child parent-bounds child-bounds correct-v bounds objects]
(let [row? (ctl/row? parent)
col? (ctl/col? parent)
@ -68,37 +68,50 @@
;; We need some height/width to calculate the bounds. We stablish the minimum
min-width (max min-width 0.01)
min-height (max min-height 0.01)]
min-height (max min-height 0.01)
(cond-> [base-p
(gpt/add base-p (hv 0.01))
(gpt/add base-p (vv 0.01))]
base-p (gpt/add base-p correct-v)
col?
(conj (gpt/add base-p (vv min-height)))
result
(cond-> [base-p
(gpt/add base-p (hv 0.01))
(gpt/add base-p (vv 0.01))]
row?
(conj (gpt/add base-p (hv min-width)))
col?
(conj (gpt/add base-p (vv min-height)))
(and col? h-start?)
(conj (gpt/add base-p (hv min-width)))
row?
(conj (gpt/add base-p (hv min-width)))
(and col? h-center?)
(conj (gpt/add base-p (hv (/ min-width 2)))
(gpt/subtract base-p (hv (/ min-width 2))))
(and col? h-start?)
(conj (gpt/add base-p (hv min-width)))
(and col? h-end?)
(conj (gpt/subtract base-p (hv min-width)))
(and col? h-center?)
(conj (gpt/add base-p (hv (/ min-width 2)))
(gpt/subtract base-p (hv (/ min-width 2))))
(and row? v-start?)
(conj (gpt/add base-p (vv min-height)))
(and col? h-end?)
(conj (gpt/subtract base-p (hv min-width)))
(and row? v-center?)
(conj (gpt/add base-p (vv (/ min-height 2)))
(gpt/subtract base-p (vv (/ min-height 2))))
(and row? v-start?)
(conj (gpt/add base-p (vv min-height)))
(and row? v-end?)
(conj (gpt/subtract base-p (vv min-height))))))
(and row? v-center?)
(conj (gpt/add base-p (vv (/ min-height 2)))
(gpt/subtract base-p (vv (/ min-height 2))))
(and row? v-end?)
(conj (gpt/subtract base-p (vv min-height))))
correct-v
(cond-> correct-v
(and row? (ctl/fill-width? child))
(gpt/subtract (hv (+ width min-width)))
(and col? (ctl/fill-height? child))
(gpt/subtract (vv (+ height min-height)))
)]
[result correct-v]))
(defn layout-content-points
[bounds parent children objects]
@ -106,26 +119,31 @@
(let [parent-id (:id parent)
parent-bounds @(get bounds parent-id)
get-child-bounds
(fn [child]
(fn [[result correct-v] child]
(let [child-id (:id child)
child-bounds @(get bounds child-id)
[margin-top margin-right margin-bottom margin-left] (ctl/child-margins child)
child-bounds
[child-bounds correct-v]
(if (or (ctl/fill-width? child) (ctl/fill-height? child))
(child-layout-bound-points parent child parent-bounds child-bounds bounds objects)
child-bounds)
(child-layout-bound-points parent child parent-bounds child-bounds correct-v bounds objects)
[(->> child-bounds (map #(gpt/add % correct-v))) correct-v])
child-bounds
(when (d/not-empty? child-bounds)
(-> (gpo/parent-coords-bounds child-bounds parent-bounds)
(gpo/pad-points (- margin-top) (- margin-right) (- margin-bottom) (- margin-left))))]
child-bounds))]
[(cond-> result (some? child-bounds) (conj child-bounds))
correct-v]))
reverse? (ctl/reverse? parent)
children (cond->> children (not reverse?) reverse)]
(->> children
(remove ctl/layout-absolute?)
(map get-child-bounds))))
(reduce get-child-bounds [[] (gpt/point 0)])
(first))))
(defn layout-content-bounds
[bounds {:keys [layout-padding] :as parent} children objects]

8
common/src/app/common/geom/shapes/modifiers.cljc
View file

@ -307,6 +307,8 @@
flex-layout? (ctl/flex-layout? parent)
grid-layout? (ctl/grid-layout? parent)
auto? (or (ctl/auto-height? parent) (ctl/auto-width? parent))
fill-with-grid? (and (ctl/grid-layout? objects (:parent-id parent))
(or (ctl/fill-width? parent) (ctl/fill-height? parent)))
parent? (or (cph/group-like-shape? parent) (cph/frame-shape? parent))
transformed-parent-bounds (delay (gtr/transform-bounds @(get bounds parent-id) modifiers))
@ -333,7 +335,8 @@
(set-grid-layout-modifiers 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)))]))
;; also if the child is fill width/height inside a grid layout
(cond-> autolayouts (or auto? fill-with-grid?) (conj (:id parent)))]))
(defn- apply-structure-modifiers
[objects modif-tree]
@ -415,7 +418,8 @@
(contains? to-reflow current)
(disj current))]
(if (ctm/empty? auto-resize-modifiers)
(if (and (ctm/empty? auto-resize-modifiers)
(not (ctl/grid-layout? objects (:parent-id parent-base))))
(recur modif-tree
bounds
(rest sizing-auto-layouts)

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

@ -712,7 +712,6 @@
(defn update-position
"Move shapes to a new position"
[id position]
(js/console.log "DEBUG" (pr-str position))
(dm/assert! (uuid? id))
(ptk/reify ::update-position

8
frontend/src/app/util/code_gen/style_css_values.cljs
View file

@ -75,9 +75,9 @@
[_ shape objects]
(let [parent (cph/get-parent objects (:id shape))]
(when (and (ctl/flex-layout-immediate-child? objects shape)
(or (and (contains? #{:row :reverse-row} (:layout-flex-dir parent))
(or (and (contains? #{:row :row-reverse} (:layout-flex-dir parent))
(= :fill (:layout-item-h-sizing shape)))
(and (contains? #{:column :column-row} (:layout-flex-dir parent))
(and (contains? #{:column :column-reverse} (:layout-flex-dir parent))
(= :fill (:layout-item-v-sizing shape)))))
1)))
@ -90,10 +90,10 @@
(cond
(and (ctl/flex-layout-immediate-child? objects shape)
(or (and (= type :height)
(contains? #{:row :reverse-row} (:layout-flex-dir parent))
(contains? #{:row :row-reverse} (:layout-flex-dir parent))
(= :fill (:layout-item-v-sizing shape)))
(and (= type :width)
(contains? #{:column :column-row} (:layout-flex-dir parent))
(contains? #{:column :column-reverse} (:layout-flex-dir parent))
(= :fill (:layout-item-h-sizing shape)))))
:fill