🐛 Fix problems with position absolute and code generation

common/src/app/common/geom/shapes/flex_layout/lines.cljc

@@ -162,7 +162,6 @@
 
 (defn add-lines-positions
   [parent layout-bounds layout-lines]
-
   (let [row?          (ctl/row? parent)
         col?          (ctl/col? parent)
         auto-width?   (ctl/auto-width? parent)
@@ -410,6 +409,9 @@
         reverse?      (ctl/reverse? shape)
         children      (cond->> children (not reverse?) reverse)
 
+        ;; Don't take into account absolute children
+        children      (->> children (remove (comp ctl/layout-absolute? second)))
+
         ;; Creates the layout lines information
         layout-lines
         (->> (init-layout-lines shape children layout-bounds)

frontend/src/app/main/ui/formats.cljs

@@ -46,12 +46,16 @@
 (defn format-padding-margin-shorthand
   [values]
   ;; Values come in [p1 p2 p3 p4]
-  (let [[p1 p2 p3 p4] values]
+  (let [[p1 p2 p3 p4] values
+        p1 (format-number p1)
+        p2 (format-number p2)
+        p3 (format-number p3)
+        p4 (format-number p4)]
     (cond
-      (apply = values)
+      (= p1 p2 p3 p4)
       {:p1 p1}
 
-      (= 4 (count (set values)))
+      (= 4 (count (set [p1 p2 p3 p4])))
       {:p1 p1 :p2 p2 :p3 p3 :p4 p4}
 
       (and (= p1 p3) (= p2 p4))
@@ -59,7 +63,6 @@
 
       (and (not= p1 p3) (= p2 p4))
       {:p1 p1 :p2 p2 :p3 p3}
-      
       :else
       {:p1 p1 :p2 p2 :p3 p3 :p4 p4})))
 
@@ -71,7 +74,7 @@
       (= sizing :fill) "100%"
       (= sizing :auto) "auto"
       (number? value)  (format-pixels value)
-      :else value)))
+      :else            value)))
 
 (defn format-padding
   [padding-values type]
@@ -92,5 +95,5 @@
   (let [row-gap (:row-gap gap-values)
         column-gap (:column-gap gap-values)]
     (if (= row-gap column-gap)
-      (str/fmt "%spx" row-gap)
-      (str/fmt "%spx %spx" row-gap column-gap))))
+      (str/fmt "%spx" (format-number row-gap))
+      (str/fmt "%spx %spx" (format-number row-gap) (format-number column-gap)))))

frontend/src/app/main/ui/viewer/inspect/attributes/layout_flex.cljs

@@ -107,13 +107,13 @@
       [:& copy-button {:data (copy-data shape :layout-align-content)}]])
    
    [:div.attributes-unit-row
-    [:div.attributes-label "Gap"]
-    (if (=  (:row-gap (:layout-gap shape))  (:column-gap (:layout-gap shape)))
+    [:div.attributes-label "Gaps"]
+    (if (= (:row-gap (:layout-gap shape)) (:column-gap (:layout-gap shape)))
       [:div.attributes-value
-       [:span (str/capital (d/name (:row-gap (:layout-gap shape)))) "px"]]
+       [:span (-> shape :layout-gap :row-gap fm/format-pixels)]]
       [:div.attributes-value
-       [:span.items (:row-gap (:layout-gap shape)) "px"]
-       [:span (:column-gap (:layout-gap shape)) "px"]])
+       [:span.items (-> shape :layout-gap :row-gap fm/format-pixels)]
+       [:span (-> shape :layout-gap :column-gap fm/format-pixels)]])
     [:& copy-button {:data (copy-data shape :layout-gap)}]]
 
    [:div.attributes-unit-row

frontend/src/app/main/ui/viewer/inspect/code.cljs

@@ -72,7 +72,9 @@
         page-id    (:page-id (:query-params route))
         flex-items (get-flex-elements page-id shapes from)
         objects    (get-objects from)
-        shapes     (map #(assoc % :flex-items flex-items) shapes)
+        shapes     (->> shapes
+                        (map #(assoc % :parent (get objects (:parent-id %))))
+                        (map #(assoc % :flex-items flex-items)))
         style-code (-> (cg/generate-style-code @style-type shapes)
                        (format-code "css"))
 

frontend/src/app/util/code_gen.cljs

@@ -10,6 +10,7 @@
    [app.common.data.macros :as dm]
    [app.common.pages.helpers :as cph]
    [app.common.text :as txt]
+   [app.common.types.shape.layout :as ctl]
    [app.main.ui.formats :as fmt]
    [app.util.color :as uc]
    [cuerdas.core :as str]))
@@ -21,12 +22,6 @@
      (if (= style :inner-shadow) "inset " "")
      (str/fmt "%spx %spx %spx %spx %s" offset-x offset-y blur spread css-color))))
 
-(defn format-gap
-  [{row-gap :row-gap column-gap :column-gap}]
-  (if (= row-gap column-gap)
-    (str/fmt "%spx" row-gap)
-    (str/fmt "%spx %spx" row-gap column-gap)))
-
 (defn fill-color->background
   [fill]
   (uc/color->background {:color (:fill-color fill)
@@ -58,10 +53,15 @@
       (str/format "%spx %s %s" width style (uc/color->background color)))))
 
 (defn format-position [_ shape]
-  (cond
-    (cph/frame-shape? shape) "relative"
-    (empty? (:flex-items shape)) "absolute"
-    :else "static"))
+  (let [relative? (cph/frame-shape? shape)
+        absolute? (or (empty? (:flex-items shape))
+                      (and (ctl/any-layout? (:parent shape)) (ctl/layout-absolute? shape)))]
+    (cond
+      absolute? "absolute"
+      relative? "relative"
+
+      ;; static is default value in css
+      :else     nil)))
 
 (defn get-size
   [type values]
@@ -80,7 +80,8 @@
   {:position    {:props [:type]
                  :to-prop {:type "position"}
                  :format {:type format-position}}
-   :layout      {:props   (if (empty? (:flex-items shape))
+   :layout      {:props   (if (or (empty? (:flex-items shape))
+                                  (ctl/layout-absolute? shape))
                             [:width :height :x :y :radius :rx :r1]
                             [:width :height :radius :rx :r1])
                  :to-prop {:x "left"
@@ -89,7 +90,7 @@
                            :rx "border-radius"
                            :r1 "border-radius"}
                  :format  {:rotation #(str/fmt "rotate(%sdeg)" %)
-                           :r1       #(apply str/fmt "%spx, %spx, %spx, %spx" %)
+                           :r1       #(apply str/fmt "%spx %spx %spx %spx" %)
                            :width    #(get-size :width %)
                            :height   #(get-size :height %)}
                  :multi   {:r1 [:r1 :r2 :r3 :r4]}}
@@ -124,7 +125,7 @@
                            :layout-align-items d/name
                            :layout-justify-content d/name
                            :layout-wrap-type d/name
-                           :layout-gap format-gap
+                           :layout-gap fmt/format-gap
                            :layout-padding fmt/format-padding}}})
 
 (def style-text