🐛 Fix problems with code generation

common/src/app/common/geom/shapes/bounds.cljc

@@ -154,7 +154,7 @@
           (empty? (:shapes shape))
           [(calculate-base-bounds shape)]
 
-          (:masked-group shape)
+          (or (:masked-group shape) (= :bool (:type shape)))
           [(calculate-base-bounds shape)]
 
           (and (cph/frame-shape? shape) (not (:show-content shape)))

common/src/app/common/geom/shapes/grid_layout/positions.cljc

@@ -142,7 +142,9 @@
 
           :center
           [(gpt/add origin-h (hv (/ child-width 2)))
-           (gpo/project-point cell-bounds :h (gpo/center cell-bounds))]
+           (-> (gpo/project-point cell-bounds :h (gpo/center cell-bounds))
+               (gpt/add (hv (/ left-m 2)))
+               (gpt/subtract (hv (/ right-m 2))))]
 
           [origin-h
            (gpt/add (first cell-bounds) (hv left-m))])
@@ -155,7 +157,9 @@
 
           :center
           [(gpt/add origin-v (vv (/ child-height 2)))
-           (gpo/project-point cell-bounds :v (gpo/center cell-bounds))]
+           (-> (gpo/project-point cell-bounds :v (gpo/center cell-bounds))
+               (gpt/add (vv top-m))
+               (gpt/subtract (vv bottom-m)))]
 
           [origin-v
            (gpt/add (first cell-bounds) (vv top-m))])]

frontend/src/app/main/ui/shapes/frame.cljs

@@ -168,8 +168,7 @@
           is-component? (mf/use-ctx muc/is-component?)
           childs        (cond-> childs
                           (ctl/any-layout? shape)
-                          (cph/sort-layout-children-z-index))
+                          (cph/sort-layout-children-z-index))]
-          ]
 
       [:> frame-container props
        [:g.frame-children {:opacity (:opacity shape)}

frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs

@@ -519,8 +519,7 @@
                                :on-change-behaviour-v-refactor on-change-behaviour-v
                                :on-change on-change-behaviour}]
          (when is-absolute?
-           [:div {:class (stl/css-case :z-index-wrapper true
+           [:div {:class (stl/css-case :z-index-wrapper true)
-                                       :disabled (not is-absolute?))
                   :title "z-index"}
 
             [:span {:class (stl/css :icon-text)}
@@ -653,7 +652,6 @@
                :on-focus #(dom/select-target %)
                :on-change #(on-change-z-index %)
                :nillable true
-               :disabled (not is-absolute?)
                :value (:layout-item-z-index values)}]]]])
 
         [:*

frontend/src/app/util/code_gen/common.cljs

@@ -11,6 +11,7 @@
 
 (defn shape->selector
   [shape]
+  (if shape
     (let [name (-> (:name shape)
                    (subs 0 (min 10 (count (:name shape))))
                    (str/replace #"[^a-zA-Z0-9\s\:]+" ""))
@@ -20,4 +21,5 @@
                  (subs 24 36))
           selector (str/css-selector (dm/str name " " id))
           selector (if (str/starts-with? selector "-") (subs selector 1) selector)]
-    selector))
+      selector)
+    ""))

frontend/src/app/util/code_gen/markup_html.cljs

@@ -42,7 +42,7 @@
    ;; When a shape has several strokes or the stroke is not a "border"
    (or (> (count (:strokes shape)) 1)
        (and (= (count (:strokes shape)) 1)
-            (not= (-> shape :strokes first :stroke-alignment) :center)))))
+            (not= (-> shape :strokes first :stroke-alignment) :inner)))))
 
 (defn generate-html
   ([objects shape]
@@ -58,7 +58,8 @@
            (let [svg-markup (generate-svg objects shape)]
              (dm/fmt "%<div class=\"%\">\n%\n%</div>"
                      indent
-                     (cgc/shape->selector shape)
+                     (dm/str "shape " (d/name (:type shape)) " "
+                             (cgc/shape->selector shape))
                      svg-markup
                      indent))
 
@@ -66,7 +67,8 @@
            (let [text-shape-html (rds/renderToStaticMarkup (mf/element text/text-shape #js {:shape shape :code? true}))]
              (dm/fmt "%<div class=\"%\">\n%\n%</div>"
                      indent
-                     (cgc/shape->selector shape)
+                     (dm/str "shape " (d/name (:type shape)) " "
+                             (cgc/shape->selector shape))
                      text-shape-html
                      indent))
 
@@ -76,19 +78,22 @@
              (dm/fmt "%<img src=\"%\" class=\"%\">\n%</img>"
                      indent
                      image-url
-                     (cgc/shape->selector shape)
+                     (dm/str "shape " (d/name (:type shape)) " "
+                             (cgc/shape->selector shape))
                      indent))
 
            (empty? (:shapes shape))
            (dm/fmt "%<div class=\"%\">\n%</div>"
                    indent
-                   (cgc/shape->selector shape)
+                   (dm/str "shape " (d/name (:type shape)) " "
+                           (cgc/shape->selector shape))
                    indent)
 
            :else
            (dm/fmt "%<div class=\"%\">\n%\n%</div>"
                    indent
-                   (cgc/shape->selector shape)
+                   (dm/str (d/name (:type shape)) " "
+                           (cgc/shape->selector shape))
                    (->> (:shapes shape)
                         (maybe-reverse)
                         (map #(generate-html objects (get objects %) (inc level)))

frontend/src/app/util/code_gen/style_css.cljs

@@ -78,6 +78,7 @@ svg {
    :column-gap
    :row-gap
    :padding
+   :z-index
 
    ;; Flex related properties
    :flex-direction

frontend/src/app/util/code_gen/style_css_formats.cljs

@@ -17,6 +17,8 @@
    :top                   :position
    :width                 :size
    :height                :size
+   :min-width             :size
+   :min-height            :size
    :background            :color
    :background-color      :color
    :background-image      :color-array
@@ -28,6 +30,7 @@
    :row-gap               :size-array
    :column-gap            :size-array
    :padding               :size-array
+   :margin                :size-array
    :grid-template-rows    :tracks
    :grid-template-columns :tracks
    :transform             :matrix

frontend/src/app/util/code_gen/style_css_values.cljs

@@ -28,8 +28,9 @@
   (cond
     (or (and (ctl/any-layout-immediate-child? objects shape)
              (not (ctl/layout-absolute? shape))
-             (or (cph/group-shape? shape)
+             (or (cph/group-like-shape? shape)
-                 (cph/frame-shape? shape)))
+                 (cph/frame-shape? shape)
+                 (svg-markup? shape)))
         (cph/root-frame? shape))
     :relative
 
@@ -42,8 +43,11 @@
 
 (defn get-shape-position
   [shape objects coord]
-  (let [
+
-        parent (get objects (:parent-id shape))
+  (when (and (not (cph/root-frame? shape))
+             (or (not (ctl/any-layout-immediate-child? objects shape))
+                 (ctl/layout-absolute? shape)))
+    (let [parent (get objects (:parent-id shape))
           parent-value (dm/get-in parent [:selrect coord])
 
           [selrect _ _]
@@ -51,24 +55,9 @@
               (gsh/transform-points (gsh/shape->center parent) (:transform-inverse parent))
               (gsh/calculate-geometry))
 
-        ;;shape (gsh/transform-shape)
+          shape-value (get selrect coord)]
-        shape-value (get selrect coord)
-        ]
-    (when (and (not (cph/root-frame? shape))
-               (or (not (ctl/any-layout-immediate-child? objects shape))
-                   (ctl/layout-absolute? shape)))
       (- shape-value parent-value))))
 
-#_(defn get-shape-position
-  [shape objects coord]
-  (when-not (or (cph/root-frame? shape)
-                (and (ctl/any-layout-immediate-child? objects shape)
-                     (not (ctl/layout-absolute? shape))))
-    (let [parent (get objects (:parent-id shape))
-          bounds (gpo/parent-coords-bounds (:points shape) (:points parent))
-          vv (gpt/to-vec (first (:points parent)) (first bounds))]
-      (get vv coord))))
-
 (defmethod get-value :left
   [_ shape objects]
   (get-shape-position shape objects :x))
@@ -250,7 +239,8 @@
 
 (defn get-grid-coord
   [shape objects prop span-prop]
-  (when (ctl/grid-layout-immediate-child? objects shape)
+  (when (and (ctl/grid-layout-immediate-child? objects shape)
+             (not (ctl/layout-absolute? shape)))
     (let [parent (get objects (:parent-id shape))
           cell (ctl/get-cell-by-shape-id parent (:id shape))]
       (if (> (get cell span-prop) 1)
@@ -275,10 +265,22 @@
     0))
 
 (defmethod get-value :margin
-  [_ shape objects]
+  [_ {:keys [layout-item-margin] :as shape} objects]
+
+  (when (ctl/any-layout-immediate-child? objects shape)
+    (let [default-margin {:m1 0 :m2 0 :m3 0 :m4 0}
+          {:keys [m1 m2 m3 m4]} (merge default-margin layout-item-margin)]
+      (when (or (not= m1 0) (not= m2 0) (not= m3 0) (not= m4 0))
+        [m1 m2 m3 m4]))))
+
+(defmethod get-value :z-index
+  [_ {:keys [layout-item-z-index] :as shape} objects]
   (cond
-    (ctl/flex-layout-immediate-child? objects shape)
+    (cph/root-frame? shape)
-    (:layout-item-margin shape)))
+    0
+
+    (ctl/any-layout-immediate-child? objects shape)
+    layout-item-z-index))
 
 (defmethod get-value :max-height
   [_ shape objects]
@@ -289,8 +291,11 @@
 (defmethod get-value :min-height
   [_ shape objects]
   (cond
-    (ctl/flex-layout-immediate-child? objects shape)
+    (and (ctl/flex-layout-immediate-child? objects shape) (some? (:layout-item-min-h shape)))
-    (:layout-item-min-h shape)))
+    (:layout-item-min-h shape)
+
+    (and (ctl/auto-height? shape) (cph/frame-shape? shape) (not (:show-content shape)))
+    (-> shape :selrect :height)))
 
 (defmethod get-value :max-width
   [_ shape objects]
@@ -301,8 +306,11 @@
 (defmethod get-value :min-width
   [_ shape objects]
   (cond
-    (ctl/flex-layout-immediate-child? objects shape)
+    (and (ctl/flex-layout-immediate-child? objects shape) (some? (:layout-item-min-w shape)))
-    (:layout-item-min-w shape)))
+    (:layout-item-min-w shape)
+
+    (and (ctl/auto-width? shape) (cph/frame-shape? shape) (not (:show-content shape)))
+    (-> shape :selrect :width)))
 
 (defmethod get-value :align-self
   [_ shape objects]