✨ Improving code gen for multiple fills

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

@@ -88,7 +88,7 @@
   (->> shapes
        (keep
         (fn [shape]
-          (when-let [data (or (:metadata shape) (:fill-image shape))]
+          (when-let [data (or (:metadata shape) (:fill-image shape) (-> shape :fills first :fill-image))]
             [(:id shape) (cfg/resolve-file-media data)])))))
 
 (defn replace-map
@@ -104,8 +104,7 @@
                       embed-images? (replace-map images-data))
 
         style-code (cond-> style-code
-                     remove-localhost?
-                     (str/replace "http://localhost:3449" ""))]
+                     embed-images? (replace-map images-data))]
     (str/format page-template style-code markup-code)))
 
 (mf/defc code
@@ -145,7 +144,6 @@
 
         images-urls (-> (shapes->images all-children)
                         (hooks/use-equal-memo))
-
         style-code
         (mf/use-memo
          (mf/deps fontfaces-css style-type all-children cg/generate-style-code)
@@ -270,7 +268,7 @@
                     :on-click on-expand}
            i/code-refactor]
 
-          [:& copy-button {:data style-code
+          [:& copy-button {:data #(replace-map style-code images-data)
                            :on-copied on-style-copied}]]]
 
         (when-not collapsed-css?
@@ -339,7 +337,7 @@
           {:on-click on-expand}
           i/full-screen]
 
-         [:& copy-button {:data style-code
+         [:& copy-button {:data #(replace-map style-code images-data)
                           :on-copied on-style-copied}]]
 
         [:div.code-row-display {:style #js {"--code-height" (str (or style-size 400) "px")}}

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

@@ -49,6 +49,9 @@
         (or (d/not-empty? (:shadow shape))
             (d/not-empty? (:strokes shape))))
 
+   ;; When a shape has several fills
+   (> (count (:fills shape)) 1)
+
    ;; When a shape has several strokes or the stroke is not a "border"
    (or (> (count (:strokes shape)) 1)
        (and (= (count (:strokes shape)) 1)

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

@@ -71,8 +71,6 @@ body {
    :height
    :transform
    :background
-   :background-color
-   :background-image
    :border
    :border-radius
    :box-shadow

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

@@ -8,6 +8,7 @@
   (:require
    [app.common.data :as d]
    [app.common.data.macros :as dm]
+   [app.config :as cfg]
    [app.main.ui.formats :as fmt]
    [app.util.color :as uc]
    [cuerdas.core :as str]))
@@ -20,8 +21,6 @@
    :min-width             :size
    :min-height            :size
    :background            :color
-   :background-color      :color
-   :background-image      :color-array
    :border                :border
    :border-radius         :string-or-size-array
    :box-shadow            :shadows
@@ -55,6 +54,17 @@
 (defn format-color
   [value _options]
   (cond
+    (:image value)
+    (let [image-url (cfg/resolve-file-media (:image value))
+          opacity-color (when (not= (:opacity value) 1)
+                          (uc/gradient->css {:type :linear
+                                             :stops [{:color "#FFFFFF" :opacity (:opacity value)}
+                                                     {:color "#FFFFFF" :opacity (:opacity value)}]}))]
+      (if opacity-color
+        ;; CSS doesn't allow setting directly opacity to background image, we should add a dummy gradient to get it
+        (dm/fmt "%, url(%) no-repeat center center / cover" opacity-color image-url)
+        (dm/fmt "url(%) no-repeat center center / cover" image-url)))
+
     (not= (:opacity value) 1)
     (uc/color->background value)
 

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

@@ -18,10 +18,11 @@
    [cuerdas.core :as str]))
 
 (defn fill->color
-  [{:keys [fill-color fill-opacity fill-color-gradient]}]
+  [{:keys [fill-color fill-opacity fill-color-gradient fill-image]}]
   {:color fill-color
    :opacity fill-opacity
-   :gradient fill-color-gradient})
+   :gradient fill-color-gradient
+   :image fill-image})
 
 (defmulti get-value
   (fn [property _shape _objects] property))
@@ -145,25 +146,8 @@
 
 (defmethod get-value :background
   [_ {:keys [fills] :as shape} _]
-  (let [single-fill? (= (count fills) 1)
-        ffill (first fills)
-        gradient? (some? (:fill-color-gradient ffill))]
-    (when (and (not (cgc/svg-markup? shape)) (not (cfh/group-shape? shape)) single-fill? gradient?)
-      (fill->color ffill))))
-
-(defmethod get-value :background-color
-  [_ {:keys [fills] :as shape} _]
-  (let [single-fill? (= (count fills) 1)
-        ffill (first fills)
-        gradient? (some? (:fill-color-gradient ffill))]
-    (when (and (not (cgc/svg-markup? shape)) (not (cfh/group-shape? shape)) single-fill? (not gradient?))
-      (fill->color ffill))))
-
-(defmethod get-value :background-image
-  [_ {:keys [fills] :as shape} _]
-  (when (and (not (cgc/svg-markup? shape)) (not (cfh/group-shape? shape)) (> (count fills) 1))
-    (->> fills
-         (map fill->color))))
+  (when (and (not (cgc/svg-markup? shape)) (not (cfh/group-shape? shape)))
+    (fill->color (first fills))))
 
 (defn get-stroke-data
   [stroke]