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

✨ CSS code generation first draft

Browse source
This commit is contained in:
alonso.torres 2020-10-29 17:04:16 +01:00 • committed by Hirunatan
parent 5d6b07f2a7
commit 28f90da70e
10 changed files with 237 additions and 108 deletions
Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/app/main/ui/shapes/filters.cljs
View file

@ -97,7 +97,7 @@
(mf/defc layer-blur-filter
[{:keys [filter-id params]}]
[:feGaussianBlur {:stdDeviation (/ (:value params) 2)
[:feGaussianBlur {:stdDeviation (:value params)
:result filter-id}])
(mf/defc image-fix-filter [{:keys [filter-id]}]

38
frontend/src/app/main/ui/shapes/shape.cljs
View file

@ -18,27 +18,6 @@
[app.main.ui.shapes.gradients :as grad]
[app.main.ui.context :as muc]))
(mf/defc background-blur [{:keys [shape]}]
(when-let [background-blur-filters (->> shape :blur (remove #(= (:type %) :layer-blur)) (remove :hidden))]
(for [filter background-blur-filters]
[:*
[:foreignObject {:key (str "blur_" (:id filter))
:pointerEvents "none"
:x (:x shape)
:y (:y shape)
:width (:width shape)
:height (:height shape)
:transform (geom/transform-matrix shape)}
[:style ""]
[:div.backround-blur
{:style {:width "100%"
:height "100%"
;; :backdrop-filter (str/format "blur(%spx)" (:value filter))
:filter (str/format "blur(4px")
}}]]])))
(mf/defc shape-container
{::mf/wrap-props false}
[props]
@ -51,23 +30,12 @@
(obj/clone)
(obj/without ["shape" "children"])
(obj/set! "className" "shape")
(obj/set! "data-type" (:type shape))
(obj/set! "filter" (filters/filter-str filter-id shape)))
;;group-props (if (seq (:blur shape))
;; (obj/set! group-props "clip-path" (str/fmt "url(#%s)" (str "blur_" render-id)))
;; group-props)
]
(obj/set! "filter" (filters/filter-str filter-id shape)))]
[:& (mf/provider muc/render-ctx) {:value render-id}
[:> :g group-props
[:defs
[:& filters/filters {:shape shape :filter-id filter-id}]
[:& grad/gradient {:shape shape :attr :fill-color-gradient}]
[:& grad/gradient {:shape shape :attr :stroke-color-gradient}]
#_(when (:blur shape)
[:clipPath {:id (str "blur_" render-id)}
children])]
[:& background-blur {:shape shape}]
[:& grad/gradient {:shape shape :attr :stroke-color-gradient}]]
children]]))