🐛 Fix problems with absolute positioning and hidden elements

2025-03-24 13:41:39 -05:00 · 2023-12-07 16:20:41 +01:00 · 2023-12-07 16:20:41 +01:00 · dc2c83bb62
commit dc2c83bb62
parent f6c2d0646d
26 changed files with 56 additions and 45 deletions
--- a/common/src/app/common/geom/modifiers.cljc
+++ b/common/src/app/common/geom/modifiers.cljc
@ -82,7 +82,6 @@
          children
          (->> children
               (keep (d/getf objects))
-               (remove :hidden)
               (remove gco/invalid-geometry?)
               (map (partial apply-modifiers bounds)))

@ -169,13 +168,13 @@
         children-modifiers
         (if (or flex-layout? grid-layout?)
           (->> (:shapes parent)
-                (filter #(ctl/layout-absolute? objects %)))
+                (filter #(ctl/position-absolute? objects %)))
           (:shapes parent))

         children-layout
         (when (or flex-layout? grid-layout?)
           (->> (:shapes parent)
-                (remove #(ctl/layout-absolute? objects %))))]
+                (remove #(ctl/position-absolute? objects %))))]

     (cond-> modif-tree
       (and has-modifiers? parent? (not root?))
@ -222,7 +221,7 @@
                (ctm/resize (gpt/point 1 scale-height) origin (:transform parent) (:transform-inverse parent)))))

        children (->> (cfh/get-immediate-children objects parent-id)
-                      (remove :hidden)
+                      (remove ctl/position-absolute?)
                      (remove gco/invalid-geometry?))

        content-bounds
--- a/common/src/app/common/geom/shapes/constraints.cljc
+++ b/common/src/app/common/geom/shapes/constraints.cljc
@ -299,7 +299,7 @@
          ignore-constraints
          :scale

-          (and (ctl/any-layout? parent) (not (ctl/layout-absolute? child)))
+          (and (ctl/any-layout? parent) (not (ctl/position-absolute? child)))
          :left

          :else
@ -310,7 +310,7 @@
          ignore-constraints
          :scale

-          (and (ctl/any-layout? parent) (not (ctl/layout-absolute? child)))
+          (and (ctl/any-layout? parent) (not (ctl/position-absolute? child)))
          :top

          :else
@ -335,13 +335,14 @@
                                   child-bounds (gtr/transform-bounds child-bounds modifiers)
                                   parent-bounds transformed-parent-bounds))

-            transformed-child-bounds (if reset-modifiers?
-                                       child-bounds
-                                       (gtr/transform-bounds child-bounds modifiers))]
+            transformed-child-bounds
+            (if reset-modifiers?
+              child-bounds
+              (gtr/transform-bounds child-bounds modifiers))]

        ;; If the parent is a layout we don't need to calculate its constraints. Finish
        ;; 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
          (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)
--- a/common/src/app/common/geom/shapes/flex_layout/layout_data.cljc
+++ b/common/src/app/common/geom/shapes/flex_layout/layout_data.cljc
@ -421,8 +421,12 @@
         reverse?      (ctl/reverse? shape)
         children      (cond->> children (not reverse?) reverse)

+         ignore-child?
+         (fn [[_ child]]
+           (ctl/position-absolute? child))
+
         ;; 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
         layout-lines
--- a/common/src/app/common/geom/shapes/grid_layout/layout_data.cljc
+++ b/common/src/app/common/geom/shapes/grid_layout/layout_data.cljc
@ -424,7 +424,7 @@

         children
         (->> children
-              (remove #(ctl/layout-absolute? (second %))))
+              (remove #(ctl/position-absolute? (second %))))

         children-map
         (into {}
--- a/common/src/app/common/geom/shapes/grid_layout/positions.cljc
+++ b/common/src/app/common/geom/shapes/grid_layout/positions.cljc
@ -178,7 +178,7 @@
        position-delta (child-position-delta parent child child-bounds child-width child-height layout-data cell-data)]

    (cond-> (ctm/empty)
-      (not (ctl/layout-absolute? child))
+      (not (ctl/position-absolute? child))
      (-> (ctm/add-modifiers fill-modifiers)
          (ctm/move position-delta)))))

--- a/common/src/app/common/types/shape/layout.cljc
+++ b/common/src/app/common/types/shape/layout.cljc
@ -491,12 +491,19 @@
 (defn align-self-stretch? [{:keys [layout-item-align-self]}]
  (= :stretch layout-item-align-self))

-(defn layout-absolute?
+(defn item-absolute?
  ([objects id]
-   (layout-absolute? (get objects id)))
+   (item-absolute? (get objects id)))
  ([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
  ([objects id]
   (layout-z-index (get objects id)))
@ -509,11 +516,11 @@
       (auto-width? objects frame-id)
       (or (and (col? objects frame-id)
                (->> children-ids
-                     (remove (partial layout-absolute? objects))
+                     (remove (partial position-absolute? objects))
                     (every? (partial fill-width? objects))))
           (and (row? objects frame-id)
                (->> children-ids
-                     (remove (partial layout-absolute? objects))
+                     (remove (partial position-absolute? objects))
                     (some (partial fill-width? objects)))))))

 (defn change-v-sizing?
@ -1169,7 +1176,7 @@
                  (update :shapes #(d/removev children %))
                  (assign-cells))

-        children (->> children (remove #(layout-absolute? objects %)))]
+        children (->> children (remove #(position-absolute? objects %)))]

    (-> frame
        (update :shapes d/concat-vec children)
--- a/frontend/src/app/main/data/workspace/modifiers.cljs
+++ b/frontend/src/app/main/data/workspace/modifiers.cljs
@ -193,7 +193,7 @@
                  (update :shapes #(d/removev ids %))
                  (ctl/assign-cells))

-        ids (->> ids (remove #(ctl/layout-absolute? objects %)))
+        ids (->> ids (remove #(ctl/position-absolute? objects %)))
        frame (-> frame
                  (update :shapes d/concat-vec ids)
                  (cond-> (some? cell)
--- a/frontend/src/app/main/data/workspace/shape_layout.cljs
+++ b/frontend/src/app/main/data/workspace/shape_layout.cljs
@ -361,7 +361,7 @@
        all-children (->> parent
                          :shapes
                          (map (d/getf objects))
-                          (remove ctl/layout-absolute?))]
+                          (remove ctl/position-absolute?))]

    (cond-> shape
      ;; If the parent is hug width and the direction column
--- a/frontend/src/app/main/data/workspace/transforms.cljs
+++ b/frontend/src/app/main/data/workspace/transforms.cljs
@ -721,7 +721,7 @@
            selected (wsh/lookup-selected state {:omit-blocked? true})
            selected-shapes (->> selected (map (d/getf objects)))]
        (if (every? #(and (ctl/any-layout-immediate-child? objects %)
-                          (not (ctl/layout-absolute? %)))
+                          (not (ctl/position-absolute? %)))
                    selected-shapes)
          (rx/of (reorder-selected-layout-child direction))
          (rx/of (nudge-selected-shapes direction shift?)))))))
@ -829,7 +829,7 @@
            moving-shapes
            (->> moving-shapes
                 (remove (fn [shape]
-                           (and (ctl/layout-absolute? shape)
+                           (and (ctl/position-absolute? shape)
                                (= frame-id (:parent-id shape))))))

            frame-component
--- a/frontend/src/app/main/ui/measurements.cljs
+++ b/frontend/src/app/main/ui/measurements.cljs
@ -16,6 +16,7 @@
   [app.common.geom.shapes.points :as gpo]
   [app.common.math :as mth]
   [app.common.types.modifiers :as ctm]
+   [app.common.types.shape.layout :as ctl]
   [app.common.uuid :as uuid]
   [app.main.data.workspace.modifiers :as dwm]
   [app.main.data.workspace.state-helpers :as wsh]
@ -693,8 +694,7 @@

        objects                    (wsh/lookup-page-objects @st/state)
        children              (->> (cfh/get-immediate-children objects frame-id)
-                                   (remove :layout-item-absolute)
-                                   (remove :hidden))
+                                   (remove ctl/position-absolute?))

        children-to-display (if (or (= :row-reverse saved-dir)
                                    (= :column-reverse saved-dir))
--- a/frontend/src/app/main/ui/viewer/inspect/left_sidebar.cljs
+++ b/frontend/src/app/main/ui/viewer/inspect/left_sidebar.cljs
@ -46,7 +46,7 @@
                        (make-collapsed-iref id))

        expanded? (not (mf/deref collapsed-iref))
-        absolute? (ctl/layout-absolute? item)
+        absolute? (ctl/item-absolute? item)
        toggle-collapse
        (fn [event]
          (dom/stop-propagation event)
--- a/frontend/src/app/main/ui/workspace/sidebar/layer_item.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/layer_item.cljs
@ -56,7 +56,7 @@

        container?        (or (cfh/frame-shape? item)
                              (cfh/group-shape? item))
-        absolute?         (ctl/layout-absolute? item)
+        absolute?         (ctl/item-absolute? item)

        components-v2     (mf/use-ctx ctx/components-v2)
        read-only?        (mf/use-ctx ctx/workspace-read-only?)
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
@ -378,7 +378,7 @@
        selection-parents-ref (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids))
        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)

@ -510,7 +510,7 @@
       (when open?
         [:div {:class (stl/css :flex-element-menu)}
          [:div {:class (stl/css :row)}
-           (when is-flex-parent?
+           (when (or is-layout-child? is-absolute?)
             [:div {:class (stl/css :position-options)}
              [:& radio-buttons {:selected (if is-absolute? "absolute" "static")
                                 :on-change on-change-position
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
@ -93,7 +93,7 @@
        selection-parents     (mf/deref selection-parents-ref)

        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-auto-width?  (ctl/auto-width? shape)
        flex-fill-width?  (ctl/fill-width? shape)
--- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/bool.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/bool.cljs
@ -41,7 +41,7 @@
        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-layout-child-absolute? (ctl/layout-absolute? shape)
+        is-layout-child-absolute? (ctl/item-absolute? shape)

        ids (hooks/use-equal-memo ids)
        parents-by-ids-ref (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids))
--- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/circle.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/circle.cljs
@ -43,7 +43,7 @@
        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-layout-child-absolute? (ctl/layout-absolute? shape)
+        is-layout-child-absolute? (ctl/item-absolute? shape)

        ids (hooks/use-equal-memo ids)
        parents-by-ids-ref (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids))
--- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs
@ -49,7 +49,7 @@
        is-grid-parent? (mf/deref is-grid-parent-ref)

        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)
        parents-by-ids-ref (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids))
--- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs
@ -50,7 +50,7 @@
        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-layout-child-absolute? (ctl/layout-absolute? shape)
+        is-layout-child-absolute? (ctl/item-absolute? shape)

        ids (hooks/use-equal-memo ids)
        parents-by-ids-ref (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids))
--- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/image.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/image.cljs
@ -43,7 +43,7 @@
        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-layout-child-absolute? (ctl/layout-absolute? shape)
+        is-layout-child-absolute? (ctl/item-absolute? shape)

        ids (hooks/use-equal-memo ids)
        parents-by-ids-ref (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids))
--- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/path.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/path.cljs
@ -43,7 +43,7 @@
        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-layout-child-absolute? (ctl/layout-absolute? shape)
+        is-layout-child-absolute? (ctl/item-absolute? shape)

        ids (hooks/use-equal-memo ids)
        parents-by-ids-ref (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids))
--- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/rect.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/rect.cljs
@ -46,7 +46,7 @@
        is-grid-parent*           (mf/use-memo (mf/deps ids) #(refs/grid-layout-child? ids))
        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                   (mf/deref parents-by-ids*)]
--- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/svg_raw.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/svg_raw.cljs
@ -116,7 +116,7 @@
        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-layout-child-absolute? (ctl/layout-absolute? shape)
+        is-layout-child-absolute? (ctl/item-absolute? shape)

        ids (hooks/use-equal-memo ids)
        parents-by-ids-ref (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids))
--- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/text.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/text.cljs
@ -40,7 +40,7 @@
        is-grid-parent? (mf/deref is-grid-parent-ref)

        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)
        parents-by-ids-ref (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids))
--- a/frontend/src/app/util/code_gen/common.cljs
+++ b/frontend/src/app/util/code_gen/common.cljs
@ -61,6 +61,6 @@
  [objects shape]
  ;; Layout children with a transform should be wrapped
  (and (ctl/any-layout-immediate-child? objects shape)
-       (not (ctl/layout-absolute? shape))
+       (not (ctl/position-absolute? shape))
       (not (gmt/unit? (:transform shape)))))

--- a/frontend/src/app/util/code_gen/style_css.cljs
+++ b/frontend/src/app/util/code_gen/style_css.cljs
@ -133,7 +133,7 @@ body {
               [:height height]]

        (or (not (ctl/any-layout-immediate-child? objects shape))
-            (not (ctl/layout-absolute? shape)))
+            (not (ctl/position-absolute? shape)))
        (conj [:position "relative"])))))

 (defn shape->wrapper-child-css-properties
--- a/frontend/src/app/util/code_gen/style_css_values.cljs
+++ b/frontend/src/app/util/code_gen/style_css_values.cljs
@ -31,7 +31,7 @@
  [_ shape objects]
  (cond
    (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)
                 (cfh/frame-shape? shape)
                 (cgc/svg-markup? shape)))
@ -39,7 +39,7 @@
    :relative

    (and (ctl/any-layout-immediate-child? objects shape)
-         (not (ctl/layout-absolute? shape)))
+         (not (ctl/position-absolute? shape)))
    nil

    :else
@ -50,7 +50,7 @@

  (when (and (not (cfh/root-frame? 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))

@ -291,7 +291,7 @@
 (defn get-grid-coord
  [shape objects prop span-prop]
  (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))
          cell (ctl/get-cell-by-shape-id parent (:id shape))]
      (when (and
@ -314,7 +314,7 @@
 (defmethod get-value :grid-area
  [_ shape objects]
  (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))
          cell (ctl/get-cell-by-shape-id parent (:id shape))]
      (when (and (= (:position cell) :area) (d/not-empty? (:area-name cell)))