✨ Improved code generation

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

@@ -101,3 +101,15 @@
     (if (= row-gap column-gap)
       (str/fmt "%spx" (format-number row-gap))
       (str/fmt "%spx %spx" (format-number row-gap) (format-number column-gap)))))
+
+(defn format-matrix
+  ([mtx]
+   (format-matrix mtx 2))
+  ([{:keys [a b c d e f]} precision]
+   (dm/fmt "matrix(%, %, %, %, %, %)"
+           (mth/to-fixed a precision)
+           (mth/to-fixed b precision)
+           (mth/to-fixed c precision)
+           (mth/to-fixed d precision)
+           (mth/to-fixed e precision)
+           (mth/to-fixed f precision))))

frontend/src/app/main/ui/shapes/text/styles.cljs

@@ -7,10 +7,10 @@
 (ns app.main.ui.shapes.text.styles
   (:require
    [app.common.data :as d]
-   [app.common.data.macros :as dm]
    [app.common.text :as txt]
    [app.common.transit :as transit]
    [app.main.fonts :as fonts]
+   [app.main.ui.formats :as fmt]
    [app.util.color :as uc]
    [app.util.object :as obj]
    [cuerdas.core :as str]))
@@ -18,8 +18,8 @@
 (defn generate-root-styles
   [{:keys [width height]} node]
   (let [valign (:vertical-align node "top")
-        base   #js {:height (dm/str height "px")
-                    :width  (dm/str width "px")
+        base   #js {:height (fmt/format-pixels height)
+                    :width  (fmt/format-pixels width)
                     :fontFamily "sourcesanspro"
                     :display "flex"
                     :whiteSpace "break-spaces"}]

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

@@ -32,7 +32,7 @@
    [potok.core :as ptk]
    [rumext.v2 :as mf]))
 
-(def embed-images? false)
+(def embed-images? true)
 (def remove-localhost? true)
 
 (def page-template

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

@@ -418,8 +418,8 @@
                                    :tooltip-bottom-left (not= align :start)
                                    :tooltip-bottom (= align :start))
          :alt      (if is-col?
-                     (dm/str "justify-content: " (d/name align))
-                     (dm/str "align-content: " (d/name align)))
+                     (dm/str "align-content: " (d/name align))
+                     (dm/str "justify-content: " (d/name align)))
          :on-click #(set-justify align type)
          :key      (dm/str "justify-content" (d/name align))}
         (get-layout-grid-icon :justify-items align is-col?)])]))
@@ -592,16 +592,16 @@
             (st/emit! (dwsl/update-layout ids {:layout-justify-items value}))))
 
         ;; Justify grid
-        grid-justify-content-row    (:layout-align-content values)
-        grid-justify-content-column (:layout-justify-content values)
+        grid-justify-content-row    (:layout-justify-content values)
+        grid-justify-content-column (:layout-align-content values)
 
         set-justify-grid
         (mf/use-callback
          (mf/deps ids)
          (fn [value type]
            (if (= type :row)
-             (st/emit! (dwsl/update-layout ids {:layout-align-content value}))
-             (st/emit! (dwsl/update-layout ids {:layout-justify-content value})))))]
+             (st/emit! (dwsl/update-layout ids {:layout-justify-content value}))
+             (st/emit! (dwsl/update-layout ids {:layout-align-content value})))))]
 
     [:div.element-set
      [:div.element-set-title

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

@@ -12,11 +12,12 @@
 (defn shape->selector
   [shape]
   (let [name (-> (:name shape)
-                 (subs 0 (min 10 (count (:name shape)))))
+                 (subs 0 (min 10 (count (:name shape))))
+                 (str/replace #"[^a-zA-Z0-9\s\:]+" ""))
         ;; selectors cannot start with numbers
         name (if (re-matches #"^\d.*" name) (dm/str "c-" name) name)
         id (-> (dm/str (:id shape))
-               #_(subs 24 36))
+               (subs 24 36))
         selector (str/css-selector (dm/str name " " id))
         selector (if (str/starts-with? selector "-") (subs selector 1) selector)]
     selector))

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

@@ -30,6 +30,7 @@
    :padding               :size-array
    :grid-template-rows    :tracks
    :grid-template-columns :tracks
+   :transform             :matrix
    })
 
 (defmulti format-value
@@ -132,6 +133,10 @@
   [_ value _options]
   (dm/fmt "blur(%)" (fmt/format-pixels value)))
 
+(defmethod format-value :matrix
+  [_ value _options]
+  (fmt/format-matrix value))
+
 (defmethod format-value :default
   [_ value _options]
   (if (keyword? value)

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

@@ -77,12 +77,13 @@
   (get-shape-position shape objects :y))
 
 (defn get-shape-size
-  [shape type]
+  [shape objects type]
   (let [sizing (if (= type :width)
                  (:layout-item-h-sizing shape)
                  (:layout-item-v-sizing shape))]
     (cond
-      (or (= sizing :fill) (= sizing :auto))
+      (or (and (ctl/any-layout? shape) (= sizing :auto))
+          (and (ctl/any-layout-immediate-child? shape objects) (= sizing :fill)))
       sizing
 
       (some? (:selrect shape))
@@ -92,18 +93,22 @@
       (get shape type))))
 
 (defmethod get-value :width
-  [_ shape _]
-  (get-shape-size shape :width))
+  [_ shape objects]
+  (get-shape-size shape objects :width))
 
 (defmethod get-value :height
-  [_ shape _]
-  (get-shape-size shape :height))
+  [_ shape objects]
+  (get-shape-size shape objects :height))
 
 (defmethod get-value :transform
   [_ shape objects]
-  (let [parent (get objects (:parent-id shape))]
-    (dm/str (gmt/multiply (:transform shape (gmt/matrix))
-                          (:transform-inverse parent (gmt/matrix))))))
+  (let [parent (get objects (:parent-id shape))
+
+        transform
+        (gmt/multiply (:transform shape (gmt/matrix))
+                      (:transform-inverse parent (gmt/matrix)))]
+    (when-not (gmt/unit? transform)
+      transform)))
 
 (defmethod get-value :background
   [_ {:keys [fills] :as shape} _]