✨ Improved code generation

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

@@ -465,11 +465,11 @@
         row-add-auto      (/ free-row-space row-autos)
 
         column-tracks (cond-> column-tracks
-                        (= :stretch (:layout-align-content parent))
+                        (= :stretch (:layout-justify-content parent))
                         (add-auto-size column-add-auto))
 
         row-tracks    (cond-> row-tracks
-                        (= :stretch (:layout-justify-content parent))
+                        (= :stretch (:layout-align-content parent))
                         (add-auto-size row-add-auto))
 
         column-total-size (tracks-total-size column-tracks)
@@ -477,7 +477,7 @@
 
         num-columns (count column-tracks)
         column-gap
-        (case (:layout-align-content parent)
+        (case (:layout-justify-content parent)
           auto-width?
           column-gap
 
@@ -494,7 +494,7 @@
 
         num-rows (count row-tracks)
         row-gap
-        (case (:layout-justify-content parent)
+        (case (:layout-align-content parent)
           auto-height?
           row-gap
 
@@ -511,28 +511,28 @@
 
         start-p
         (cond-> bound-corner
-          (and (not auto-width?) (= :end (:layout-align-content parent)))
+          (and (not auto-width?) (= :end (:layout-justify-content parent)))
           (gpt/add (hv (- bound-width (+ column-total-size column-total-gap))))
 
-          (and (not auto-width?) (= :center (:layout-align-content parent)))
+          (and (not auto-width?) (= :center (:layout-justify-content parent)))
           (gpt/add (hv (/ (- bound-width (+ column-total-size column-total-gap)) 2)))
 
-          (and (not auto-height?) (= :end (:layout-justify-content parent)))
+          (and (not auto-height?) (= :end (:layout-align-content parent)))
           (gpt/add (vv (- bound-height (+ row-total-size row-total-gap))))
 
-          (and (not auto-height?) (= :center (:layout-justify-content parent)))
+          (and (not auto-height?) (= :center (:layout-align-content parent)))
           (gpt/add (vv (/ (- bound-height (+ row-total-size row-total-gap)) 2)))
 
-          (and (not auto-width?) (= :space-around (:layout-align-content parent)))
+          (and (not auto-width?) (= :space-around (:layout-justify-content parent)))
           (gpt/add (hv (/ column-gap 2)))
 
-          (and (not auto-width?) (= :space-evenly (:layout-align-content parent)))
+          (and (not auto-width?) (= :space-evenly (:layout-justify-content parent)))
           (gpt/add (hv column-gap))
 
-          (and (not auto-height?) (= :space-around (:layout-justify-content parent)))
+          (and (not auto-height?) (= :space-around (:layout-align-content parent)))
           (gpt/add (vv (/ row-gap 2)))
 
-          (and (not auto-height?) (= :space-evenly (:layout-justify-content parent)))
+          (and (not auto-height?) (= :space-evenly (:layout-align-content parent)))
           (gpt/add (vv row-gap)))
 
         column-tracks

common/src/app/common/pages/changes.cljc

@@ -104,6 +104,15 @@
       [:index {:optional true} [:maybe :int]]
       [:after-shape {:optional true} :any]]]
 
+    [:reorder-children
+     [:map {:title "ReorderChildrenChange"}
+      [:type [:= :reorder-children]]
+      [:page-id {:optional true} ::sm/uuid]
+      [:component-id {:optional true} ::sm/uuid]
+      [:ignore-touched {:optional true} :boolean]
+      [:parent-id ::sm/uuid]
+      [:shapes :any]]]
+
     [:add-page
      [:map {:title "AddPageChange"}
       [:type [:= :add-page]]
@@ -331,6 +340,51 @@
         (d/update-in-when $ [:components component-id :objects] update-fn))
       (check-modify-component $))))
 
+(defmethod process-change :reorder-children
+  [data {:keys [parent-id shapes page-id component-id]}]
+  (let [changed? (atom false)
+
+        update-fn
+        (fn [objects]
+          (let [old-shapes (dm/get-in objects [parent-id :shapes])
+
+                id->idx
+                (update-vals
+                 (->> shapes
+                      d/enumerate
+                      (group-by second))
+                 (comp first first))
+
+                new-shapes
+                (into [] (sort-by id->idx < old-shapes))]
+
+            (reset! changed? (not= old-shapes new-shapes))
+
+            (cond-> objects
+              @changed?
+              (assoc-in [parent-id :shapes] new-shapes))))
+
+        check-modify-component
+        (fn [data]
+          (if @changed?
+            ;; When a shape is modified, if it belongs to a main component instance,
+            ;; the component needs to be marked as modified.
+            (let [objects (if page-id
+                            (-> data :pages-index (get page-id) :objects)
+                            (-> data :components (get component-id) :objects))
+                  shape (get objects parent-id)
+                  component-root (ctn/get-component-shape objects shape {:allow-main? true})]
+              (if (and (some? component-root) (ctk/main-instance? component-root))
+                (ctkl/set-component-modified data (:component-id component-root))
+                data))
+            data))]
+
+    (as-> data $
+      (if page-id
+        (d/update-in-when $ [:pages-index page-id :objects] update-fn)
+        (d/update-in-when $ [:components component-id :objects] update-fn))
+      (check-modify-component $))))
+
 (defmethod process-change :del-obj
   [data {:keys [page-id component-id id ignore-touched]}]
   (if page-id

common/src/app/common/pages/changes_builder.cljc

@@ -725,21 +725,21 @@
         reorder-grid
         (fn [changes grid]
           (let [old-shapes (:shapes grid)
-                grid     (ctl/reorder-grid-children grid)
+                grid       (ctl/reorder-grid-children grid)
+                new-shapes (->> (:shapes grid)
+                                (filterv #(contains? objects %)))
 
                 redo-change
-                {:type :mov-objects
+                {:type :reorder-children
                  :parent-id (:id grid)
                  :page-id page-id
-                 :shapes (:shapes grid)
+                 :shapes new-shapes}
-                 :index 0}
 
                 undo-change
-                {:type :mov-objects
+                {:type :reorder-children
                  :parent-id (:id grid)
                  :page-id page-id
-                 :shapes old-shapes
+                 :shapes old-shapes}]
-                 :index 0}]
             (-> changes
                 (update :redo-changes conj redo-change)
                 (update :undo-changes d/preconj undo-change)

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")
+        base   #js {:height (fmt/format-pixels height)
-                    :width  (dm/str width "px")
+                    :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-row    (:layout-justify-content values)
-        grid-justify-content-column (: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 _]
+  [_ shape objects]
-  (get-shape-size shape :width))
+  (get-shape-size shape objects :width))
 
 (defmethod get-value :height
-  [_ shape _]
+  [_ shape objects]
-  (get-shape-size shape :height))
+  (get-shape-size shape objects :height))
 
 (defmethod get-value :transform
   [_ shape objects]
-  (let [parent (get objects (:parent-id shape))]
+  (let [parent (get objects (:parent-id shape))
-    (dm/str (gmt/multiply (:transform shape (gmt/matrix))
+
-                          (:transform-inverse parent (gmt/matrix))))))
+        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} _]