3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-07-21 22:47:13 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ Improving code gen for multiple fills

Browse source
This commit is contained in:
Alejandro Alonso 2023-11-22 07:54:57 +01:00 • committed by Andrey Antukh
parent 533ec36785
commit 5285e1a4dd
5 changed files with 24 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

3
frontend/src/app/util/code_gen/common.cljs
View file

@ -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)

2
frontend/src/app/util/code_gen/style_css.cljs
View file

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

14
frontend/src/app/util/code_gen/style_css_formats.cljs
View file

@ -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)

26
frontend/src/app/util/code_gen/style_css_values.cljs
View file

@ -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]