diff --git a/common/src/app/common/geom/shapes/flex_layout/bounds.cljc b/common/src/app/common/geom/shapes/flex_layout/bounds.cljc index a8a268436..540b88686 100644 --- a/common/src/app/common/geom/shapes/flex_layout/bounds.cljc +++ b/common/src/app/common/geom/shapes/flex_layout/bounds.cljc @@ -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] diff --git a/common/src/app/common/geom/shapes/modifiers.cljc b/common/src/app/common/geom/shapes/modifiers.cljc index c082e9ab9..ebb1db8e0 100644 --- a/common/src/app/common/geom/shapes/modifiers.cljc +++ b/common/src/app/common/geom/shapes/modifiers.cljc @@ -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) diff --git a/frontend/src/app/main/data/workspace/transforms.cljs b/frontend/src/app/main/data/workspace/transforms.cljs index ce1cd5a1d..48403d362 100644 --- a/frontend/src/app/main/data/workspace/transforms.cljs +++ b/frontend/src/app/main/data/workspace/transforms.cljs @@ -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 diff --git a/frontend/src/app/util/code_gen/style_css_values.cljs b/frontend/src/app/util/code_gen/style_css_values.cljs index dae838040..175d185e1 100644 --- a/frontend/src/app/util/code_gen/style_css_values.cljs +++ b/frontend/src/app/util/code_gen/style_css_values.cljs @@ -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