From 5285e1a4ddce76a6c3da187c2864366cbb040a35 Mon Sep 17 00:00:00 2001 From: Alejandro Alonso Date: Wed, 22 Nov 2023 07:54:57 +0100 Subject: [PATCH] :sparkles: Improving code gen for multiple fills --- .../src/app/main/ui/viewer/inspect/code.cljs | 10 +++---- frontend/src/app/util/code_gen/common.cljs | 3 +++ frontend/src/app/util/code_gen/style_css.cljs | 2 -- .../app/util/code_gen/style_css_formats.cljs | 14 ++++++++-- .../app/util/code_gen/style_css_values.cljs | 26 ++++--------------- 5 files changed, 24 insertions(+), 31 deletions(-) diff --git a/frontend/src/app/main/ui/viewer/inspect/code.cljs b/frontend/src/app/main/ui/viewer/inspect/code.cljs index 49aa6eb8b8..ca54120fd3 100644 --- a/frontend/src/app/main/ui/viewer/inspect/code.cljs +++ b/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")}} diff --git a/frontend/src/app/util/code_gen/common.cljs b/frontend/src/app/util/code_gen/common.cljs index 06836cec9d..5292c11db8 100644 --- a/frontend/src/app/util/code_gen/common.cljs +++ b/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) diff --git a/frontend/src/app/util/code_gen/style_css.cljs b/frontend/src/app/util/code_gen/style_css.cljs index 7d071fa2c4..7a3f9d3765 100644 --- a/frontend/src/app/util/code_gen/style_css.cljs +++ b/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 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 7717d9e51d..ad38a63031 100644 --- a/frontend/src/app/util/code_gen/style_css_formats.cljs +++ b/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) 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 5689851510..0ed0d76084 100644 --- a/frontend/src/app/util/code_gen/style_css_values.cljs +++ b/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]