🐛 Fix problems with absolute positioning and hidden elements

This commit is contained in:
alonso.torres 2023-12-07 16:20:41 +01:00
parent f6c2d0646d
commit dc2c83bb62
26 changed files with 56 additions and 45 deletions

View file

@ -82,7 +82,6 @@
children children
(->> children (->> children
(keep (d/getf objects)) (keep (d/getf objects))
(remove :hidden)
(remove gco/invalid-geometry?) (remove gco/invalid-geometry?)
(map (partial apply-modifiers bounds))) (map (partial apply-modifiers bounds)))
@ -169,13 +168,13 @@
children-modifiers children-modifiers
(if (or flex-layout? grid-layout?) (if (or flex-layout? grid-layout?)
(->> (:shapes parent) (->> (:shapes parent)
(filter #(ctl/layout-absolute? objects %))) (filter #(ctl/position-absolute? objects %)))
(:shapes parent)) (:shapes parent))
children-layout children-layout
(when (or flex-layout? grid-layout?) (when (or flex-layout? grid-layout?)
(->> (:shapes parent) (->> (:shapes parent)
(remove #(ctl/layout-absolute? objects %))))] (remove #(ctl/position-absolute? objects %))))]
(cond-> modif-tree (cond-> modif-tree
(and has-modifiers? parent? (not root?)) (and has-modifiers? parent? (not root?))
@ -222,7 +221,7 @@
(ctm/resize (gpt/point 1 scale-height) origin (:transform parent) (:transform-inverse parent))))) (ctm/resize (gpt/point 1 scale-height) origin (:transform parent) (:transform-inverse parent)))))
children (->> (cfh/get-immediate-children objects parent-id) children (->> (cfh/get-immediate-children objects parent-id)
(remove :hidden) (remove ctl/position-absolute?)
(remove gco/invalid-geometry?)) (remove gco/invalid-geometry?))
content-bounds content-bounds

View file

@ -299,7 +299,7 @@
ignore-constraints ignore-constraints
:scale :scale
(and (ctl/any-layout? parent) (not (ctl/layout-absolute? child))) (and (ctl/any-layout? parent) (not (ctl/position-absolute? child)))
:left :left
:else :else
@ -310,7 +310,7 @@
ignore-constraints ignore-constraints
:scale :scale
(and (ctl/any-layout? parent) (not (ctl/layout-absolute? child))) (and (ctl/any-layout? parent) (not (ctl/position-absolute? child)))
:top :top
:else :else
@ -335,13 +335,14 @@
child-bounds (gtr/transform-bounds child-bounds modifiers) child-bounds (gtr/transform-bounds child-bounds modifiers)
parent-bounds transformed-parent-bounds)) parent-bounds transformed-parent-bounds))
transformed-child-bounds (if reset-modifiers? transformed-child-bounds
child-bounds (if reset-modifiers?
(gtr/transform-bounds child-bounds modifiers))] child-bounds
(gtr/transform-bounds child-bounds modifiers))]
;; If the parent is a layout we don't need to calculate its constraints. Finish ;; If the parent is a layout we don't need to calculate its constraints. Finish
;; after normalize the children (to keep proper proportions) ;; after normalize the children (to keep proper proportions)
(if (ctl/any-layout? parent) (if (and (ctl/any-layout? parent) (not (ctl/position-absolute? child)))
modifiers modifiers
(let [child-points-before (gpo/parent-coords-bounds child-bounds parent-bounds) (let [child-points-before (gpo/parent-coords-bounds child-bounds parent-bounds)
child-points-after (gpo/parent-coords-bounds transformed-child-bounds transformed-parent-bounds) child-points-after (gpo/parent-coords-bounds transformed-child-bounds transformed-parent-bounds)

View file

@ -421,8 +421,12 @@
reverse? (ctl/reverse? shape) reverse? (ctl/reverse? shape)
children (cond->> children (not reverse?) reverse) children (cond->> children (not reverse?) reverse)
ignore-child?
(fn [[_ child]]
(ctl/position-absolute? child))
;; Don't take into account absolute children ;; Don't take into account absolute children
children (->> children (remove (comp ctl/layout-absolute? second))) children (->> children (remove ignore-child?))
;; Creates the layout lines information ;; Creates the layout lines information
layout-lines layout-lines

View file

@ -424,7 +424,7 @@
children children
(->> children (->> children
(remove #(ctl/layout-absolute? (second %)))) (remove #(ctl/position-absolute? (second %))))
children-map children-map
(into {} (into {}

View file

@ -178,7 +178,7 @@
position-delta (child-position-delta parent child child-bounds child-width child-height layout-data cell-data)] position-delta (child-position-delta parent child child-bounds child-width child-height layout-data cell-data)]
(cond-> (ctm/empty) (cond-> (ctm/empty)
(not (ctl/layout-absolute? child)) (not (ctl/position-absolute? child))
(-> (ctm/add-modifiers fill-modifiers) (-> (ctm/add-modifiers fill-modifiers)
(ctm/move position-delta))))) (ctm/move position-delta)))))

View file

@ -491,12 +491,19 @@
(defn align-self-stretch? [{:keys [layout-item-align-self]}] (defn align-self-stretch? [{:keys [layout-item-align-self]}]
(= :stretch layout-item-align-self)) (= :stretch layout-item-align-self))
(defn layout-absolute? (defn item-absolute?
([objects id] ([objects id]
(layout-absolute? (get objects id))) (item-absolute? (get objects id)))
([shape] ([shape]
(true? (:layout-item-absolute shape)))) (true? (:layout-item-absolute shape))))
(defn position-absolute?
([objects id]
(position-absolute? (get objects id)))
([shape]
(or (item-absolute? shape)
(:hidden shape))))
(defn layout-z-index (defn layout-z-index
([objects id] ([objects id]
(layout-z-index (get objects id))) (layout-z-index (get objects id)))
@ -509,11 +516,11 @@
(auto-width? objects frame-id) (auto-width? objects frame-id)
(or (and (col? objects frame-id) (or (and (col? objects frame-id)
(->> children-ids (->> children-ids
(remove (partial layout-absolute? objects)) (remove (partial position-absolute? objects))
(every? (partial fill-width? objects)))) (every? (partial fill-width? objects))))
(and (row? objects frame-id) (and (row? objects frame-id)
(->> children-ids (->> children-ids
(remove (partial layout-absolute? objects)) (remove (partial position-absolute? objects))
(some (partial fill-width? objects))))))) (some (partial fill-width? objects)))))))
(defn change-v-sizing? (defn change-v-sizing?
@ -1169,7 +1176,7 @@
(update :shapes #(d/removev children %)) (update :shapes #(d/removev children %))
(assign-cells)) (assign-cells))
children (->> children (remove #(layout-absolute? objects %)))] children (->> children (remove #(position-absolute? objects %)))]
(-> frame (-> frame
(update :shapes d/concat-vec children) (update :shapes d/concat-vec children)

View file

@ -193,7 +193,7 @@
(update :shapes #(d/removev ids %)) (update :shapes #(d/removev ids %))
(ctl/assign-cells)) (ctl/assign-cells))
ids (->> ids (remove #(ctl/layout-absolute? objects %))) ids (->> ids (remove #(ctl/position-absolute? objects %)))
frame (-> frame frame (-> frame
(update :shapes d/concat-vec ids) (update :shapes d/concat-vec ids)
(cond-> (some? cell) (cond-> (some? cell)

View file

@ -361,7 +361,7 @@
all-children (->> parent all-children (->> parent
:shapes :shapes
(map (d/getf objects)) (map (d/getf objects))
(remove ctl/layout-absolute?))] (remove ctl/position-absolute?))]
(cond-> shape (cond-> shape
;; If the parent is hug width and the direction column ;; If the parent is hug width and the direction column

View file

@ -721,7 +721,7 @@
selected (wsh/lookup-selected state {:omit-blocked? true}) selected (wsh/lookup-selected state {:omit-blocked? true})
selected-shapes (->> selected (map (d/getf objects)))] selected-shapes (->> selected (map (d/getf objects)))]
(if (every? #(and (ctl/any-layout-immediate-child? objects %) (if (every? #(and (ctl/any-layout-immediate-child? objects %)
(not (ctl/layout-absolute? %))) (not (ctl/position-absolute? %)))
selected-shapes) selected-shapes)
(rx/of (reorder-selected-layout-child direction)) (rx/of (reorder-selected-layout-child direction))
(rx/of (nudge-selected-shapes direction shift?))))))) (rx/of (nudge-selected-shapes direction shift?)))))))
@ -829,7 +829,7 @@
moving-shapes moving-shapes
(->> moving-shapes (->> moving-shapes
(remove (fn [shape] (remove (fn [shape]
(and (ctl/layout-absolute? shape) (and (ctl/position-absolute? shape)
(= frame-id (:parent-id shape)))))) (= frame-id (:parent-id shape))))))
frame-component frame-component

View file

@ -16,6 +16,7 @@
[app.common.geom.shapes.points :as gpo] [app.common.geom.shapes.points :as gpo]
[app.common.math :as mth] [app.common.math :as mth]
[app.common.types.modifiers :as ctm] [app.common.types.modifiers :as ctm]
[app.common.types.shape.layout :as ctl]
[app.common.uuid :as uuid] [app.common.uuid :as uuid]
[app.main.data.workspace.modifiers :as dwm] [app.main.data.workspace.modifiers :as dwm]
[app.main.data.workspace.state-helpers :as wsh] [app.main.data.workspace.state-helpers :as wsh]
@ -693,8 +694,7 @@
objects (wsh/lookup-page-objects @st/state) objects (wsh/lookup-page-objects @st/state)
children (->> (cfh/get-immediate-children objects frame-id) children (->> (cfh/get-immediate-children objects frame-id)
(remove :layout-item-absolute) (remove ctl/position-absolute?))
(remove :hidden))
children-to-display (if (or (= :row-reverse saved-dir) children-to-display (if (or (= :row-reverse saved-dir)
(= :column-reverse saved-dir)) (= :column-reverse saved-dir))

View file

@ -46,7 +46,7 @@
(make-collapsed-iref id)) (make-collapsed-iref id))
expanded? (not (mf/deref collapsed-iref)) expanded? (not (mf/deref collapsed-iref))
absolute? (ctl/layout-absolute? item) absolute? (ctl/item-absolute? item)
toggle-collapse toggle-collapse
(fn [event] (fn [event]
(dom/stop-propagation event) (dom/stop-propagation event)

View file

@ -56,7 +56,7 @@
container? (or (cfh/frame-shape? item) container? (or (cfh/frame-shape? item)
(cfh/group-shape? item)) (cfh/group-shape? item))
absolute? (ctl/layout-absolute? item) absolute? (ctl/item-absolute? item)
components-v2 (mf/use-ctx ctx/components-v2) components-v2 (mf/use-ctx ctx/components-v2)
read-only? (mf/use-ctx ctx/workspace-read-only?) read-only? (mf/use-ctx ctx/workspace-read-only?)

View file

@ -378,7 +378,7 @@
selection-parents-ref (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids)) selection-parents-ref (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids))
selection-parents (mf/deref selection-parents-ref) selection-parents (mf/deref selection-parents-ref)
is-absolute? (:layout-item-absolute values) is-absolute? (:layout-item-absolute values)
is-col? (every? ctl/col? selection-parents) is-col? (every? ctl/col? selection-parents)
@ -510,7 +510,7 @@
(when open? (when open?
[:div {:class (stl/css :flex-element-menu)} [:div {:class (stl/css :flex-element-menu)}
[:div {:class (stl/css :row)} [:div {:class (stl/css :row)}
(when is-flex-parent? (when (or is-layout-child? is-absolute?)
[:div {:class (stl/css :position-options)} [:div {:class (stl/css :position-options)}
[:& radio-buttons {:selected (if is-absolute? "absolute" "static") [:& radio-buttons {:selected (if is-absolute? "absolute" "static")
:on-change on-change-position :on-change on-change-position

View file

@ -93,7 +93,7 @@
selection-parents (mf/deref selection-parents-ref) selection-parents (mf/deref selection-parents-ref)
flex-child? (->> selection-parents (some ctl/flex-layout?)) flex-child? (->> selection-parents (some ctl/flex-layout?))
absolute? (ctl/layout-absolute? shape) absolute? (ctl/item-absolute? shape)
flex-container? (ctl/flex-layout? shape) flex-container? (ctl/flex-layout? shape)
flex-auto-width? (ctl/auto-width? shape) flex-auto-width? (ctl/auto-width? shape)
flex-fill-width? (ctl/fill-width? shape) flex-fill-width? (ctl/fill-width? shape)

View file

@ -41,7 +41,7 @@
is-grid-parent-ref (mf/use-memo (mf/deps ids) #(refs/grid-layout-child? ids)) is-grid-parent-ref (mf/use-memo (mf/deps ids) #(refs/grid-layout-child? ids))
is-grid-parent? (mf/deref is-grid-parent-ref) is-grid-parent? (mf/deref is-grid-parent-ref)
is-layout-child-absolute? (ctl/layout-absolute? shape) is-layout-child-absolute? (ctl/item-absolute? shape)
ids (hooks/use-equal-memo ids) ids (hooks/use-equal-memo ids)
parents-by-ids-ref (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids)) parents-by-ids-ref (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids))

View file

@ -43,7 +43,7 @@
is-grid-parent-ref (mf/use-memo (mf/deps ids) #(refs/grid-layout-child? ids)) is-grid-parent-ref (mf/use-memo (mf/deps ids) #(refs/grid-layout-child? ids))
is-grid-parent? (mf/deref is-grid-parent-ref) is-grid-parent? (mf/deref is-grid-parent-ref)
is-layout-child-absolute? (ctl/layout-absolute? shape) is-layout-child-absolute? (ctl/item-absolute? shape)
ids (hooks/use-equal-memo ids) ids (hooks/use-equal-memo ids)
parents-by-ids-ref (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids)) parents-by-ids-ref (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids))

View file

@ -49,7 +49,7 @@
is-grid-parent? (mf/deref is-grid-parent-ref) is-grid-parent? (mf/deref is-grid-parent-ref)
is-layout-container? (ctl/any-layout? shape) is-layout-container? (ctl/any-layout? shape)
is-layout-child-absolute? (ctl/layout-absolute? shape) is-layout-child-absolute? (ctl/item-absolute? shape)
ids (hooks/use-equal-memo ids) ids (hooks/use-equal-memo ids)
parents-by-ids-ref (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids)) parents-by-ids-ref (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids))

View file

@ -50,7 +50,7 @@
is-grid-parent-ref (mf/use-memo (mf/deps ids) #(refs/grid-layout-child? ids)) is-grid-parent-ref (mf/use-memo (mf/deps ids) #(refs/grid-layout-child? ids))
is-grid-parent? (mf/deref is-grid-parent-ref) is-grid-parent? (mf/deref is-grid-parent-ref)
is-layout-child-absolute? (ctl/layout-absolute? shape) is-layout-child-absolute? (ctl/item-absolute? shape)
ids (hooks/use-equal-memo ids) ids (hooks/use-equal-memo ids)
parents-by-ids-ref (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids)) parents-by-ids-ref (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids))

View file

@ -43,7 +43,7 @@
is-grid-parent-ref (mf/use-memo (mf/deps ids) #(refs/grid-layout-child? ids)) is-grid-parent-ref (mf/use-memo (mf/deps ids) #(refs/grid-layout-child? ids))
is-grid-parent? (mf/deref is-grid-parent-ref) is-grid-parent? (mf/deref is-grid-parent-ref)
is-layout-child-absolute? (ctl/layout-absolute? shape) is-layout-child-absolute? (ctl/item-absolute? shape)
ids (hooks/use-equal-memo ids) ids (hooks/use-equal-memo ids)
parents-by-ids-ref (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids)) parents-by-ids-ref (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids))

View file

@ -43,7 +43,7 @@
is-grid-parent-ref (mf/use-memo (mf/deps ids) #(refs/grid-layout-child? ids)) is-grid-parent-ref (mf/use-memo (mf/deps ids) #(refs/grid-layout-child? ids))
is-grid-parent? (mf/deref is-grid-parent-ref) is-grid-parent? (mf/deref is-grid-parent-ref)
is-layout-child-absolute? (ctl/layout-absolute? shape) is-layout-child-absolute? (ctl/item-absolute? shape)
ids (hooks/use-equal-memo ids) ids (hooks/use-equal-memo ids)
parents-by-ids-ref (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids)) parents-by-ids-ref (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids))

View file

@ -46,7 +46,7 @@
is-grid-parent* (mf/use-memo (mf/deps ids) #(refs/grid-layout-child? ids)) is-grid-parent* (mf/use-memo (mf/deps ids) #(refs/grid-layout-child? ids))
is-grid-parent? (mf/deref is-grid-parent*) is-grid-parent? (mf/deref is-grid-parent*)
is-layout-child-absolute? (ctl/layout-absolute? shape) is-layout-child-absolute? (ctl/item-absolute? shape)
parents-by-ids* (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids)) parents-by-ids* (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids))
parents (mf/deref parents-by-ids*)] parents (mf/deref parents-by-ids*)]

View file

@ -116,7 +116,7 @@
is-grid-parent-ref (mf/use-memo (mf/deps ids) #(refs/grid-layout-child? ids)) is-grid-parent-ref (mf/use-memo (mf/deps ids) #(refs/grid-layout-child? ids))
is-grid-parent? (mf/deref is-grid-parent-ref) is-grid-parent? (mf/deref is-grid-parent-ref)
is-layout-child-absolute? (ctl/layout-absolute? shape) is-layout-child-absolute? (ctl/item-absolute? shape)
ids (hooks/use-equal-memo ids) ids (hooks/use-equal-memo ids)
parents-by-ids-ref (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids)) parents-by-ids-ref (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids))

View file

@ -40,7 +40,7 @@
is-grid-parent? (mf/deref is-grid-parent-ref) is-grid-parent? (mf/deref is-grid-parent-ref)
layout-container-values (select-keys shape layout-container-flex-attrs) layout-container-values (select-keys shape layout-container-flex-attrs)
is-layout-child-absolute? (ctl/layout-absolute? shape) is-layout-child-absolute? (ctl/item-absolute? shape)
ids (hooks/use-equal-memo ids) ids (hooks/use-equal-memo ids)
parents-by-ids-ref (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids)) parents-by-ids-ref (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids))

View file

@ -61,6 +61,6 @@
[objects shape] [objects shape]
;; Layout children with a transform should be wrapped ;; Layout children with a transform should be wrapped
(and (ctl/any-layout-immediate-child? objects shape) (and (ctl/any-layout-immediate-child? objects shape)
(not (ctl/layout-absolute? shape)) (not (ctl/position-absolute? shape))
(not (gmt/unit? (:transform shape))))) (not (gmt/unit? (:transform shape)))))

View file

@ -133,7 +133,7 @@ body {
[:height height]] [:height height]]
(or (not (ctl/any-layout-immediate-child? objects shape)) (or (not (ctl/any-layout-immediate-child? objects shape))
(not (ctl/layout-absolute? shape))) (not (ctl/position-absolute? shape)))
(conj [:position "relative"]))))) (conj [:position "relative"])))))
(defn shape->wrapper-child-css-properties (defn shape->wrapper-child-css-properties

View file

@ -31,7 +31,7 @@
[_ shape objects] [_ shape objects]
(cond (cond
(or (and (ctl/any-layout-immediate-child? objects shape) (or (and (ctl/any-layout-immediate-child? objects shape)
(not (ctl/layout-absolute? shape)) (not (ctl/position-absolute? shape))
(or (cfh/group-like-shape? shape) (or (cfh/group-like-shape? shape)
(cfh/frame-shape? shape) (cfh/frame-shape? shape)
(cgc/svg-markup? shape))) (cgc/svg-markup? shape)))
@ -39,7 +39,7 @@
:relative :relative
(and (ctl/any-layout-immediate-child? objects shape) (and (ctl/any-layout-immediate-child? objects shape)
(not (ctl/layout-absolute? shape))) (not (ctl/position-absolute? shape)))
nil nil
:else :else
@ -50,7 +50,7 @@
(when (and (not (cfh/root-frame? shape)) (when (and (not (cfh/root-frame? shape))
(or (not (ctl/any-layout-immediate-child? objects shape)) (or (not (ctl/any-layout-immediate-child? objects shape))
(ctl/layout-absolute? shape))) (ctl/position-absolute? shape)))
(let [parent (get objects (:parent-id shape)) (let [parent (get objects (:parent-id shape))
@ -291,7 +291,7 @@
(defn get-grid-coord (defn get-grid-coord
[shape objects prop span-prop] [shape objects prop span-prop]
(when (and (ctl/grid-layout-immediate-child? objects shape) (when (and (ctl/grid-layout-immediate-child? objects shape)
(not (ctl/layout-absolute? shape))) (not (ctl/position-absolute? shape)))
(let [parent (get objects (:parent-id shape)) (let [parent (get objects (:parent-id shape))
cell (ctl/get-cell-by-shape-id parent (:id shape))] cell (ctl/get-cell-by-shape-id parent (:id shape))]
(when (and (when (and
@ -314,7 +314,7 @@
(defmethod get-value :grid-area (defmethod get-value :grid-area
[_ shape objects] [_ shape objects]
(when (and (ctl/grid-layout-immediate-child? objects shape) (when (and (ctl/grid-layout-immediate-child? objects shape)
(not (ctl/layout-absolute? shape))) (not (ctl/position-absolute? shape)))
(let [parent (get objects (:parent-id shape)) (let [parent (get objects (:parent-id shape))
cell (ctl/get-cell-by-shape-id parent (:id shape))] cell (ctl/get-cell-by-shape-id parent (:id shape))]
(when (and (= (:position cell) :area) (d/not-empty? (:area-name cell))) (when (and (= (:position cell) :area) (d/not-empty? (:area-name cell)))