3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-16 18:56:10 +02:00
Code Issues Projects Releases Packages Wiki Activity

🐛 Fix fills and strokes on inspect code

Browse source
This commit is contained in:
Alejandro Alonso 2023-01-26 11:23:33 +01:00 • committed by Alonso Torres
parent f2033c46f3
commit 71d104f768
2 changed files with 54 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/app/main/ui/viewer/inspect/code.cljs
View file

@ -29,7 +29,7 @@
(dom/query js/document "#svg-frame")) (dom/query js/document "#svg-frame"))
markup-shape markup-shape
(fn [shape] (fn [shape]
(let [selector (str "#shape-" (:id shape) (when (= :text (:type shape)) " .root"))] (let [selector (str "#shape-" (:id shape))]
(when-let [el (and frame (dom/query frame selector))] (when-let [el (and frame (dom/query frame selector))]
(str (str
(str/fmt "<!-- %s -->" (:name shape)) (str/fmt "<!-- %s -->" (:name shape))

80
frontend/src/app/util/code_gen.cljs
View file

@ -7,6 +7,7 @@
(ns app.util.code-gen (ns app.util.code-gen
(:require (:require
[app.common.data :as d] [app.common.data :as d]
[app.common.pages.helpers :as cph]
[app.common.text :as txt] [app.common.text :as txt]
[app.main.ui.formats :as fmt] [app.main.ui.formats :as fmt]
[app.util.color :as uc] [app.util.color :as uc]
@ -25,22 +26,42 @@
(str/fmt "%spx" row-gap) (str/fmt "%spx" row-gap)
(str/fmt "%spx %spx" row-gap column-gap))) (str/fmt "%spx %spx" row-gap column-gap)))
(defn fill-color->background
[fill]
(uc/color->background {:color (:fill-color fill)
:opacity (:fill-opacity fill)
:gradient (:fill-color-gradient fill)}))
(defn format-fill-color [_ shape] (defn format-fill-color [_ shape]
(let [color {:color (:fill-color shape) (let [fills (:fills shape)
:opacity (:fill-opacity shape) first-fill (first fills)
:gradient (:fill-color-gradient shape)}] colors (if (> (count fills) 1)
(uc/color->background color))) (map (fn [fill]
(let [color (fill-color->background fill)]
(if (some? (:fill-color-gradient fill))
color
(str/format "linear-gradient(%s,%s)" color color))))
(:fills shape))
[(fill-color->background first-fill)])]
(str/join ", " colors)))
(defn format-stroke [_ shape] (defn format-stroke [_ shape]
(let [width (:stroke-width shape) (let [first-stroke (first (:strokes shape))
style (let [style (:stroke-style shape)] width (:stroke-width first-stroke)
style (let [style (:stroke-style first-stroke)]
(when (keyword? style) (name style))) (when (keyword? style) (name style)))
color {:color (:stroke-color shape) color {:color (:stroke-color first-stroke)
:opacity (:stroke-opacity shape) :opacity (:stroke-opacity first-stroke)
:gradient (:stroke-color-gradient shape)}] :gradient (:stroke-color-gradient first-stroke)}]
(when-not (= :none (:stroke-style shape)) (when-not (= :none (:stroke-style first-stroke))
(str/format "%spx %s %s" width style (uc/color->background color))))) (str/format "%spx %s %s" width style (uc/color->background color)))))
(defn format-position [_ shape]
(cond
(cph/frame-shape? shape) "relative"
(empty? (:flex-items shape)) "absolute"
:else "static"))
(defn get-size (defn get-size
[type values] [type values]
(let [value (cond (let [value (cond
@ -68,8 +89,14 @@
:reverse-column "column-reverse" :reverse-column "column-reverse"
"row")) "row"))
(def styles-data (defn styles-data
{:layout {:props [:width :height :x :y :radius :rx :r1] [shape]
{:position {:props [:type]
:to-prop {:type "position"}
:format {:type format-position}}
:layout {:props (if (empty? (:flex-items shape))
[:width :height :x :y :radius :rx :r1]
[:width :height :radius :rx :r1])
:to-prop {:x "left" :to-prop {:x "left"
:y "top" :y "top"
:rotation "transform" :rotation "transform"
@ -80,12 +107,12 @@
:width #(get-size :width %) :width #(get-size :width %)
:height #(get-size :height %)} :height #(get-size :height %)}
:multi {:r1 [:r1 :r2 :r3 :r4]}} :multi {:r1 [:r1 :r2 :r3 :r4]}}
:fill {:props [:fill-color :fill-color-gradient] :fill {:props [:fills]
:to-prop {:fill-color "background" :fill-color-gradient "background"} :to-prop {:fills (if (> (count (:fills shape)) 1) "background-image" "background")}
:format {:fill-color format-fill-color :fill-color-gradient format-fill-color}} :format {:fills format-fill-color}}
:stroke {:props [:stroke-style] :stroke {:props [:strokes]
:to-prop {:stroke-style "border"} :to-prop {:strokes "border"}
:format {:stroke-style format-stroke}} :format {:strokes format-stroke}}
:shadow {:props [:shadow] :shadow {:props [:shadow]
:to-prop {:shadow :box-shadow} :to-prop {:shadow :box-shadow}
:format {:shadow #(str/join ", " (map shadow->css %1))}} :format {:shadow #(str/join ", " (map shadow->css %1))}}
@ -115,7 +142,7 @@
:layout-padding fmt/format-padding}}}) :layout-padding fmt/format-padding}}})
(def style-text (def style-text
{:props [:fill-color {:props [:fills
:font-family :font-family
:font-style :font-style
:font-size :font-size
@ -123,7 +150,7 @@
:letter-spacing :letter-spacing
:text-decoration :text-decoration
:text-transform] :text-transform]
:to-prop {:fill-color "color"} :to-prop {:fills "color"}
:format {:font-family #(str "'" % "'") :format {:font-family #(str "'" % "'")
:font-style #(str %) :font-style #(str %)
:font-size #(str % "px") :font-size #(str % "px")
@ -131,7 +158,7 @@
:letter-spacing #(str % "px") :letter-spacing #(str % "px")
:text-decoration name :text-decoration name
:text-transform name :text-transform name
:fill-color format-fill-color}}) :fills format-fill-color}})
(def layout-flex-item-params (def layout-flex-item-params
{:props [:layout-item-margin {:props [:layout-item-margin
@ -224,10 +251,10 @@
;; it will come with a vector of flex-items if any. ;; 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) flex-items (:flex-items shape)
props (->> styles-data vals (mapcat :props)) props (->> (styles-data shape) vals (mapcat :props))
to-prop (->> styles-data vals (map :to-prop) (reduce merge)) to-prop (->> (styles-data shape) vals (map :to-prop) (reduce merge))
format (->> styles-data vals (map :format) (reduce merge)) format (->> (styles-data shape) vals (map :format) (reduce merge))
multi (->> styles-data vals (map :multi) (reduce merge)) multi (->> (styles-data shape) vals (map :multi) (reduce merge))
props (cond-> props props (cond-> props
(seq flex-items) (concat (:props layout-flex-item-params)) (seq flex-items) (concat (:props layout-flex-item-params))
(= :wrap (:layout-wrap-type shape)) (concat (:props layout-align-content))) (= :wrap (:layout-wrap-type shape)) (concat (:props layout-align-content)))
@ -282,7 +309,7 @@
(defn text->properties [shape] (defn text->properties [shape]
(let [flex-items (:flex-items shape) (let [flex-items (:flex-items shape)
text-shape-style (select-keys styles-data [:layout :shadow :blur]) text-shape-style (select-keys (styles-data shape) [:layout :shadow :blur])
shape-props (->> text-shape-style vals (mapcat :props)) shape-props (->> text-shape-style vals (mapcat :props))
shape-to-prop (->> text-shape-style vals (map :to-prop) (reduce merge)) shape-to-prop (->> text-shape-style vals (map :to-prop) (reduce merge))
@ -317,7 +344,6 @@
properties (if (= :text (:type shape)) properties (if (= :text (:type shape))
(text->properties shape) (text->properties shape)
(shape->properties shape)) (shape->properties shape))
selector (str/css-selector name) selector (str/css-selector name)
selector (if (str/starts-with? selector "-") (subs selector 1) selector)] selector (if (str/starts-with? selector "-") (subs selector 1) selector)]
(str/join "\n" [(str/fmt "/* %s */" name) (str/join "\n" [(str/fmt "/* %s */" name)