✨ Improved code generation

frontend/src/app/util/code_gen.cljs

@@ -6,14 +6,19 @@
 
 (ns app.util.code-gen
   (:require
+   ["react-dom/server" :as rds]
    [app.common.data :as d]
    [app.common.data.macros :as dm]
    [app.common.pages.helpers :as cph]
    [app.common.text :as txt]
    [app.common.types.shape.layout :as ctl]
+   [app.config :as cfg]
+   [app.main.render :as render]
    [app.main.ui.formats :as fmt]
+   [app.main.ui.shapes.text.html-text :as text]
    [app.util.color :as uc]
-   [cuerdas.core :as str]))
+   [cuerdas.core :as str]
+   [rumext.v2 :as mf]))
 
 (defn shadow->css [shadow]
   (let [{:keys [style offset-x offset-y blur spread]} shadow
@@ -24,9 +29,14 @@
 
 (defn fill-color->background
   [fill]
-  (uc/color->background {:color (:fill-color fill)
-                         :opacity (:fill-opacity fill)
-                         :gradient (:fill-color-gradient fill)}))
+  (cond
+    (not= (:fill-opacity fill) 1)
+    (uc/color->background {:color (:fill-color fill)
+                           :opacity (:fill-opacity fill)
+                           :gradient (:fill-color-gradient fill)})
+
+    :else
+    (str/upper (:fill-color fill))))
 
 (defn format-fill-color [_ shape]
   (let [fills      (:fills shape)
@@ -41,7 +51,7 @@
                      [(fill-color->background first-fill)])]
     (str/join ", " colors)))
 
-(defn format-stroke [_ shape]
+(defn format-stroke [shape]
   (let [first-stroke (first (:strokes shape))
         width (:stroke-width first-stroke)
         style (let [style (:stroke-style first-stroke)]
@@ -52,16 +62,32 @@
     (when-not (= :none (:stroke-style first-stroke))
       (str/format "%spx %s %s" width style (uc/color->background color)))))
 
-(defn format-position [_ shape]
-  (let [relative? (cph/frame-shape? shape)
-        absolute? (or (empty? (:flex-items shape))
-                      (and (ctl/any-layout? (:parent shape)) (ctl/layout-absolute? shape)))]
+(defn format-position [objects]
+  (fn [_ shape]
     (cond
-      absolute? "absolute"
-      relative? "relative"
+      (and (ctl/any-layout-immediate-child? objects shape)
+           (not (ctl/layout-absolute? shape))
+           (or (cph/group-shape? shape)
+               (cph/frame-shape? shape)))
+      "relative"
 
-      ;; static is default value in css
-      :else     nil)))
+      (and (ctl/any-layout-immediate-child? objects shape)
+           (not (ctl/layout-absolute? shape)))
+      nil
+
+      :else
+      "absolute")))
+
+(defn mk-grid-coord
+  [objects prop span-prop]
+
+  (fn [_ shape]
+    (when (ctl/grid-layout-immediate-child? objects shape)
+      (let [parent (get objects (:parent-id shape))
+            cell (ctl/get-cell-by-shape-id parent (:id shape))]
+        (if (> (get cell span-prop) 1)
+          (dm/str (get cell prop) " / " (+ (get cell prop) (get cell span-prop)))
+          (get cell prop))))))
 
 (defn get-size
   [type values]
@@ -75,14 +101,35 @@
       (fmt/format-size :width value values)
       (fmt/format-size :heigth value values))))
 
+(defn make-format-absolute-pos
+  [objects shape coord]
+  (fn [value]
+    (let [parent-id (dm/get-in objects [(:id shape) :parent-id])
+          parent-value (dm/get-in objects [parent-id :selrect coord])]
+      (when-not (or (cph/root-frame? shape)
+                    (ctl/any-layout-immediate-child? objects shape)
+                    (ctl/layout-absolute? shape))
+        (fmt/format-pixels (- value parent-value))))))
+
+(defn format-tracks
+  [tracks]
+  (str/join
+   " "
+   (->> tracks (map (fn [{:keys [type value]}]
+                      (case type
+                        :flex (dm/str (fmt/format-number value) "fr")
+                        :percent (fmt/format-percent (/ value 100))
+                        :auto "auto"
+                        (fmt/format-pixels value)))))))
+
 (defn styles-data
-  [shape]
+  [objects shape]
   {:position    {:props [:type]
                  :to-prop {:type "position"}
-                 :format {:type format-position}}
+                 :format {:type (format-position objects)}}
    :layout      {:props   (if (or (empty? (:flex-items shape))
                                   (ctl/layout-absolute? shape))
-                            [:width :height :x :y :radius :rx :r1]
+                            [:x :y :width :height :radius :rx :r1]
                             [:width :height :radius :rx :r1])
                  :to-prop {:x "left"
                            :y "top"
@@ -92,30 +139,60 @@
                  :format  {:rotation #(str/fmt "rotate(%sdeg)" %)
                            :r1       #(apply str/fmt "%spx %spx %spx %spx" %)
                            :width    #(get-size :width %)
-                           :height   #(get-size :height %)}
+                           :height   #(get-size :height %)
+                           :x        (make-format-absolute-pos objects shape :x)
+                           :y        (make-format-absolute-pos objects shape :y)}
                  :multi   {:r1 [:r1 :r2 :r3 :r4]}}
    :fill        {:props [:fills]
-                 :to-prop {:fills (if (> (count (:fills shape)) 1) "background-image" "background-color")}
+                 :to-prop {:fills (cond
+                                    (or (cph/path-shape? shape)
+                                        (cph/mask-shape? shape)
+                                        (cph/bool-shape? shape)
+                                        (cph/svg-raw-shape? shape)
+                                        (some? (:svg-attrs shape)))
+                                    nil
+
+                                    (> (count (:fills shape)) 1)
+                                    "background-image"
+
+                                    (and (= (count (:fills shape)) 1)
+                                         (some? (:fill-color-gradient (first (:fills shape)))))
+                                    "background"
+
+                                    :else
+                                    "background-color")}
                  :format {:fills format-fill-color}}
    :stroke      {:props [:strokes]
                  :to-prop {:strokes "border"}
-                 :format {:strokes format-stroke}}
+                 :format {:strokes (fn [_ shape]
+                                     (when-not (or (cph/path-shape? shape)
+                                                   (cph/mask-shape? shape)
+                                                   (cph/bool-shape? shape)
+                                                   (cph/svg-raw-shape? shape)
+                                                   (some? (:svg-attrs shape)))
+                                       (format-stroke shape)))}}
    :shadow      {:props [:shadow]
                  :to-prop {:shadow :box-shadow}
                  :format {:shadow #(str/join ", " (map shadow->css %1))}}
    :blur        {:props [:blur]
                  :to-prop {:blur "filter"}
                  :format {:blur #(str/fmt "blur(%spx)" (:value %))}}
+
    :layout-flex {:props   [:layout
                            :layout-flex-dir
                            :layout-align-items
+                           :layout-justify-items
+                           :layout-align-content
                            :layout-justify-content
                            :layout-gap
                            :layout-padding
                            :layout-wrap-type]
+                 :gen-props [:flex-shrink]
                  :to-prop {:layout "display"
                            :layout-flex-dir "flex-direction"
                            :layout-align-items "align-items"
+                           :layout-align-content "align-content"
+                           :layout-justify-items "justify-items"
                            :layout-justify-content "justify-content"
                            :layout-wrap-type "flex-wrap"
                            :layout-gap "gap"
@@ -123,10 +200,24 @@
                  :format  {:layout d/name
                            :layout-flex-dir d/name
                            :layout-align-items d/name
+                           :layout-align-content d/name
+                           :layout-justify-items d/name
                            :layout-justify-content d/name
                            :layout-wrap-type d/name
                            :layout-gap fmt/format-gap
-                           :layout-padding fmt/format-padding}}})
+                           :layout-padding fmt/format-padding
+                           :flex-shrink (fn [_ shape] (when (ctl/flex-layout-immediate-child? objects shape) 0))}}
+
+   :layout-grid {:props [:layout-grid-rows
+                         :layout-grid-columns]
+                 :gen-props [:grid-column
+                             :grid-row]
+                 :to-prop {:layout-grid-rows "grid-template-rows"
+                           :layout-grid-columns "grid-template-columns"}
+                 :format {:layout-grid-rows format-tracks
+                          :layout-grid-columns format-tracks
+                          :grid-column (mk-grid-coord objects :column :column-span)
+                          :grid-row (mk-grid-coord objects :row :row-span)}}})
 
 (def style-text
   {:props   [:fills
@@ -190,9 +281,12 @@
 
 (defn generate-css-props
   ([values properties]
-   (generate-css-props values properties nil))
+   (generate-css-props values properties [] nil))
 
-  ([values properties params]
+  ([values properties gen-properties]
+   (generate-css-props values properties gen-properties nil))
+
+  ([values properties gen-properties params]
    (let [{:keys [to-prop format tab-size multi]
           :or {to-prop {} tab-size 0 multi {}}} params
 
@@ -210,7 +304,7 @@
                    to-prop)
 
          get-value (fn [prop]
-                     (if-let [props (prop multi)]
+                     (if-let [props (get multi prop)]
                        (map #(get values %) props)
                        (get-specific-value values prop)))
 
@@ -220,30 +314,35 @@
                    (or (nil? value) (= value 0))))
 
          default-format (fn [value] (dm/str (fmt/format-pixels value)))
-         format-property (fn [prop]
-                           (let [css-prop (or (prop to-prop) (d/name prop))
-                                 format-fn (or (prop format) default-format)
-                                 css-val (format-fn (get-value prop) values)]
-                             (when css-val
-                               (dm/str
-                                (str/repeat " " tab-size)
-                                (str/fmt "%s: %s;" css-prop css-val)))))]
 
-     (->> properties
-          (remove #(null? (get-value %)))
-          (map format-property)
-          (filter (comp not nil?))
+         format-property
+         (fn [prop]
+           (let [css-prop (or (get to-prop prop) (d/name prop))
+                 format-fn (or (get format prop) default-format)
+                 css-val (format-fn (get-value prop) values)]
+             (when (and css-val (not= css-val ""))
+               (dm/str
+                (str/repeat " " tab-size)
+                (dm/fmt "%: %;" css-prop css-val)))))]
+
+     (->> (concat
+           (->> properties
+                (remove #(null? (get-value %))))
+           gen-properties)
+          (keep format-property)
           (str/join "\n")))))
 
-(defn shape->properties [shape]
-  (let [;; This property is added in an earlier step (code.cljs), 
+(defn shape->properties [objects shape]
+  (let [;; This property is added in an earlier step (code.cljs),
         ;; it will come with a vector of flex-items if any.
-        ;; If there are none it will continue as usual. 
+        ;; If there are none it will continue as usual.
         flex-items (:flex-items shape)
-        props      (->> (styles-data shape) vals (mapcat :props))
-        to-prop    (->> (styles-data shape) vals (map :to-prop) (reduce merge))
-        format     (->> (styles-data shape) vals (map :format) (reduce merge))
-        multi      (->> (styles-data shape) vals (map :multi) (reduce merge))
+        props      (->> (styles-data objects shape) vals (mapcat :props))
+        to-prop    (->> (styles-data objects shape) vals (map :to-prop) (reduce merge))
+        format     (->> (styles-data objects shape) vals (map :format) (reduce merge))
+        multi      (->> (styles-data objects shape) vals (map :multi) (reduce merge))
+        gen-props  (->> (styles-data objects shape) vals (mapcat :gen-props))
+
         props      (cond-> props
                      (seq flex-items) (concat (:props layout-flex-item-params))
                      (= :wrap (:layout-wrap-type shape)) (concat (:props layout-align-content)))
@@ -253,10 +352,14 @@
         format     (cond-> format
                      (seq flex-items) (merge (:format layout-flex-item-params))
                      (= :wrap (:layout-wrap-type shape)) (merge (:format layout-align-content)))]
-    (generate-css-props shape props {:to-prop to-prop
-                                     :format format
-                                     :multi multi
-                                     :tab-size 2})))
+    (generate-css-props
+     shape
+     props
+     gen-props
+     {:to-prop to-prop
+      :format format
+      :multi multi
+      :tab-size 2})))
 
 (defn search-text-attrs
   [node attrs]
@@ -269,36 +372,36 @@
 (defn parse-style-text-blocks
   [node attrs]
   (letfn
-   [(rec-style-text-map [acc node style]
-      (let [node-style (merge style (select-keys node attrs))
-            head (or (-> acc first) [{} ""])
-            [head-style head-text] head
+      [(rec-style-text-map [acc node style]
+         (let [node-style (merge style (select-keys node attrs))
+               head (or (-> acc first) [{} ""])
+               [head-style head-text] head
 
-            new-acc
-            (cond
-              (:children node)
-              (reduce #(rec-style-text-map %1 %2 node-style) acc (:children node))
+               new-acc
+               (cond
+                 (:children node)
+                 (reduce #(rec-style-text-map %1 %2 node-style) acc (:children node))
 
-              (not= head-style node-style)
-              (cons [node-style (:text node "")] acc)
+                 (not= head-style node-style)
+                 (cons [node-style (:text node "")] acc)
 
-              :else
-              (cons [node-style (dm/str head-text "" (:text node))] (rest acc)))
+                 :else
+                 (cons [node-style (dm/str head-text "" (:text node))] (rest acc)))
 
                ;; We add an end-of-line when finish a paragraph
-            new-acc
-            (if (= (:type node) "paragraph")
-              (let [[hs ht] (first new-acc)]
-                (cons [hs (dm/str ht "\n")] (rest new-acc)))
-              new-acc)]
-        new-acc))]
+               new-acc
+               (if (= (:type node) "paragraph")
+                 (let [[hs ht] (first new-acc)]
+                   (cons [hs (dm/str ht "\n")] (rest new-acc)))
+                 new-acc)]
+           new-acc))]
 
     (-> (rec-style-text-map [] node {})
         reverse)))
 
-(defn text->properties [shape]
+(defn text->properties [objects shape]
   (let [flex-items (:flex-items shape)
-        text-shape-style (select-keys (styles-data shape) [:layout :shadow :blur])
+        text-shape-style (d/without-keys (styles-data objects shape) [:fill :stroke])
 
         shape-props      (->> text-shape-style vals (mapcat :props))
         shape-to-prop    (->> text-shape-style vals (map :to-prop) (reduce merge))
@@ -315,6 +418,7 @@
                                (:content shape)
                                (conj (:props style-text) :fill-color-gradient :fill-opacity))
                               (d/merge txt/default-text-attrs))]
+
     (str/join
      "\n"
      [(generate-css-props shape
@@ -328,21 +432,128 @@
                            :format (:format style-text)
                            :tab-size 2})])))
 
-(defn generate-css [shape]
-  (let [name (:name shape)
-        properties (if (= :text (:type shape))
-                     (text->properties shape)
-                     (shape->properties shape))
-        selector (str/css-selector name)
+(defn selector-name [shape]
+  (let [
+        name (-> (:name shape)
+                 #_(subs 0 (min 10 (count (:name shape)))))
+        ;; selectors cannot start with numbers
+        name (if (re-matches #"^\d.*" name) (dm/str "c-" name) name)
+        id (-> (dm/str (:id shape))
+               #_(subs 24 36))
+        selector (str/css-selector (dm/str name " " id))
         selector (if (str/starts-with? selector "-") (subs selector 1) selector)]
+    selector))
+
+(defn generate-css [objects shape]
+  (let [name (:name shape)
+        properties (shape->properties objects shape)
+        selector (selector-name shape)]
     (str/join "\n" [(str/fmt "/* %s */" name)
                     (str/fmt ".%s {" selector)
                     properties
                     "}"])))
 
-(defn generate-style-code [type shapes]
+(defn generate-svg
+  [objects shape-id]
+  (let [shape (get objects shape-id)]
+    (rds/renderToStaticMarkup
+     (mf/element
+      render/object-svg
+      #js {:objects objects
+           :object-id (-> shape :id)}))))
+
+(defn generate-html
+  ([objects shape-id]
+   (generate-html objects shape-id 0))
+
+  ([objects shape-id level]
+   (let [shape (get objects shape-id)
+         indent (str/repeat "  " level)
+         maybe-reverse (if (ctl/any-layout? shape) reverse identity)]
+     (cond
+       (cph/text-shape? shape)
+       (let [text-shape-html (rds/renderToStaticMarkup (mf/element text/text-shape #js {:shape shape :code? true}))]
+         (dm/fmt "%<div class=\"%\">\n%\n%</div>"
+                 indent
+                 (selector-name shape)
+                 text-shape-html
+                 indent))
+
+       (cph/image-shape? shape)
+       (let [data (or (:metadata shape) (:fill-image shape))
+             image-url (cfg/resolve-file-media data)]
+         (dm/fmt "%<img src=\"%\" class=\"%\">\n%</img>"
+                 indent
+                 image-url
+                 (selector-name shape)
+                 indent))
+
+       (or (cph/path-shape? shape)
+           (cph/mask-shape? shape)
+           (cph/bool-shape? shape)
+           (cph/svg-raw-shape? shape)
+           (some? (:svg-attrs shape)))
+       (let [svg-markup (rds/renderToStaticMarkup (mf/element render/object-svg #js {:objects objects :object-id (:id shape) :render-embed? false}))]
+         (dm/fmt "%<div class=\"%\">\n%\n%</div>"
+                 indent
+                 (selector-name shape)
+                 svg-markup
+                 indent))
+
+       (empty? (:shapes shape))
+       (dm/fmt "%<div class=\"%\">\n%</div>"
+               indent
+               (selector-name shape)
+               indent)
+
+       :else
+       (dm/fmt "%<div class=\"%\">\n%\n%</div>"
+               indent
+               (selector-name shape)
+               (->> (:shapes shape)
+                    (maybe-reverse)
+                    (map #(generate-html objects % (inc level)))
+                    (str/join "\n"))
+               indent)))))
+
+(defn generate-markup-code [objects type shapes]
+  (let [generate-markup-fn (case type
+                             "html" generate-html
+                             "svg" generate-svg)]
+    (->> shapes
+         (map #(generate-markup-fn objects % 0))
+         (str/join "\n"))))
+
+(defn generate-style-code [objects type shapes]
   (let [generate-style-fn (case type
                             "css" generate-css)]
-    (->> shapes
-         (map generate-style-fn)
-         (str/join "\n\n"))))
+    (dm/str
+     "html, body {
+  background-color: #E8E9EA;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 2rem;
+}
+
+svg {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+* {
+  box-sizing: border-box;
+}
+\n"
+     (->> shapes
+          (map (partial generate-style-fn objects))
+          (str/join "\n\n")))))