From 30d78554c22c013ce67826828ed5bcf18111d5b6 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Mon, 26 Jun 2023 12:51:02 +0200 Subject: [PATCH] :sparkles: Improved code generation --- .../geom/shapes/grid_layout/layout_data.cljc | 24 ++++----- common/src/app/common/pages/changes.cljc | 54 +++++++++++++++++++ .../src/app/common/pages/changes_builder.cljc | 14 ++--- frontend/src/app/main/ui/formats.cljs | 12 +++++ .../src/app/main/ui/shapes/text/styles.cljs | 6 +-- .../src/app/main/ui/viewer/inspect/code.cljs | 2 +- .../options/menus/layout_container.cljs | 12 ++--- frontend/src/app/util/code_gen/common.cljs | 5 +- .../app/util/code_gen/style_css_formats.cljs | 5 ++ .../app/util/code_gen/style_css_values.cljs | 23 ++++---- 10 files changed, 117 insertions(+), 40 deletions(-) diff --git a/common/src/app/common/geom/shapes/grid_layout/layout_data.cljc b/common/src/app/common/geom/shapes/grid_layout/layout_data.cljc index 29335b86a8..4a92e0b17b 100644 --- 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 diff --git a/common/src/app/common/pages/changes.cljc b/common/src/app/common/pages/changes.cljc index 739cf6ac09..45854b9375 100644 --- 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 diff --git a/common/src/app/common/pages/changes_builder.cljc b/common/src/app/common/pages/changes_builder.cljc index 08c2db3d83..8e2588d4e5 100644 --- 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) diff --git a/frontend/src/app/main/ui/formats.cljs b/frontend/src/app/main/ui/formats.cljs index 28296b183a..a11c12f84a 100644 --- 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)))) diff --git a/frontend/src/app/main/ui/shapes/text/styles.cljs b/frontend/src/app/main/ui/shapes/text/styles.cljs index 35f0126a95..38625b2c72 100644 --- 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"}] diff --git a/frontend/src/app/main/ui/viewer/inspect/code.cljs b/frontend/src/app/main/ui/viewer/inspect/code.cljs index 7738480630..91fdd23db8 100644 --- 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 diff --git 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 index f75e9c2c5c..ab490b749e 100644 --- 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 diff --git a/frontend/src/app/util/code_gen/common.cljs b/frontend/src/app/util/code_gen/common.cljs index 07eb37ce21..1cddbf506c 100644 --- 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)) diff --git a/frontend/src/app/util/code_gen/style_css_formats.cljs b/frontend/src/app/util/code_gen/style_css_formats.cljs index ff26757f74..440868be75 100644 --- 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) diff --git a/frontend/src/app/util/code_gen/style_css_values.cljs b/frontend/src/app/util/code_gen/style_css_values.cljs index 1dfc6d8dbc..0037414928 100644 --- 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} _]