✨ Improved code generation

2025-03-13 00:01:51 -05:00 · 2023-06-26 12:51:02 +02:00 · 2023-06-26 12:51:02 +02:00 · 30d78554c2
commit 30d78554c2
parent cb502fc70d
10 changed files with 117 additions and 40 deletions
--- a/common/src/app/common/geom/shapes/grid_layout/layout_data.cljc
+++ b/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
--- a/common/src/app/common/pages/changes.cljc
+++ b/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
--- a/common/src/app/common/pages/changes_builder.cljc
+++ b/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)
-                 :index 0}
+                 :shapes new-shapes}

                undo-change
-                {:type :mov-objects
+                {:type :reorder-children
                 :parent-id (:id grid)
                 :page-id page-id
-                 :shapes old-shapes
-                 :index 0}]
+                 :shapes old-shapes}]
            (-> changes
                (update :redo-changes conj redo-change)
                (update :undo-changes d/preconj undo-change)
--- a/frontend/src/app/main/ui/formats.cljs
+++ b/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))))
--- a/frontend/src/app/main/ui/shapes/text/styles.cljs
+++ b/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"}]
--- a/frontend/src/app/main/ui/viewer/inspect/code.cljs
+++ b/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
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs
+++ b/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
--- a/frontend/src/app/util/code_gen/common.cljs
+++ b/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))
--- a/frontend/src/app/util/code_gen/style_css_formats.cljs
+++ b/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)
--- a/frontend/src/app/util/code_gen/style_css_values.cljs
+++ b/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} _]