diff --git a/frontend/src/app/main/ui/shapes/filters.cljs b/frontend/src/app/main/ui/shapes/filters.cljs index 93feb1b8f4..9c3c9c3350 100644 --- a/frontend/src/app/main/ui/shapes/filters.cljs +++ b/frontend/src/app/main/ui/shapes/filters.cljs @@ -26,7 +26,7 @@ (= :layer-blur (-> shape :blur :type)))) (str/ffmt "url(#%)" filter-id))) -(mf/defc color-matrix +(mf/defc color-matrix* [{:keys [color]}] (let [{:keys [color opacity]} color [r g b a] (cc/hex->rgba color opacity) @@ -35,7 +35,7 @@ {:type "matrix" :values (str/ffmt "0 0 0 0 % 0 0 0 0 % 0 0 0 0 % 0 0 0 % 0" r g b a)}])) -(mf/defc drop-shadow-filter +(mf/defc drop-shadow-filter* [{:keys [filter-in filter-id params]}] (let [{:keys [color offset-x offset-y blur spread]} params] @@ -56,13 +56,13 @@ [:feOffset {:dx offset-x :dy offset-y}] [:feGaussianBlur {:stdDeviation (/ blur 2)}] - [:& color-matrix {:color color}] + [:> color-matrix* {:color color}] [:feBlend {:mode "normal" :in2 filter-in :result filter-id}]])) -(mf/defc inner-shadow-filter +(mf/defc inner-shadow-filter* [{:keys [filter-in filter-id params]}] (let [{:keys [color offset-x offset-y blur spread]} params] @@ -85,13 +85,13 @@ :k2 "-1" :k3 "1"}] - [:& color-matrix {:color color}] + [:> color-matrix* {:color color}] [:feBlend {:mode "normal" :in2 filter-in :result filter-id}]])) -(mf/defc background-blur-filter +(mf/defc background-blur-filter* [{:keys [filter-id params]}] [:* [:feGaussianBlur {:in "BackgroundImage" @@ -100,32 +100,32 @@ :operator "in" :result filter-id}]]) -(mf/defc layer-blur-filter +(mf/defc layer-blur-filter* [{:keys [filter-id params]}] [:feGaussianBlur {:stdDeviation (:value params) :result filter-id}]) -(mf/defc image-fix-filter [{:keys [filter-id]}] +(mf/defc image-fix-filter* [{:keys [filter-id]}] [:feFlood {:flood-opacity 0 :result filter-id}]) -(mf/defc blend-filters [{:keys [filter-id filter-in]}] +(mf/defc blend-filters* [{:keys [filter-id filter-in]}] [:feBlend {:mode "normal" :in "SourceGraphic" :in2 filter-in :result filter-id}]) -(mf/defc filter-entry [{:keys [entry]}] +(mf/defc filter-entry* [{:keys [entry]}] (let [props #js {:filter-id (:id entry) :filter-in (:filter-in entry) :params (:params entry)}] (case (:type entry) - :drop-shadow [:> drop-shadow-filter props] - :inner-shadow [:> inner-shadow-filter props] - :background-blur [:> background-blur-filter props] - :layer-blur [:> layer-blur-filter props] - :image-fix [:> image-fix-filter props] - :blend-filters [:> blend-filters props]))) + :drop-shadow [:> drop-shadow-filter* props] + :inner-shadow [:> inner-shadow-filter* props] + :background-blur [:> background-blur-filter* props] + :layer-blur [:> layer-blur-filter* props] + :image-fix [:> image-fix-filter* props] + :blend-filters [:> blend-filters* props]))) (defn change-filter-in "Adds the previous filter as `filter-in` parameter" @@ -160,7 +160,7 @@ filter-units "objectBoundingBox"] [filter-x filter-y filter-width filter-height filter-units]))) -(mf/defc filters +(mf/defc filters* [{:keys [filter-id shape]}] (let [shape' (update shape :shadow reverse) @@ -181,6 +181,6 @@ :filterUnits filter-units :color-interpolation-filters "sRGB"} (for [[index entry] (d/enumerate filters)] - [:& filter-entry {:key (dm/str filter-id "-" index) - :entry entry}])]))) + [:> filter-entry* {:key (dm/str filter-id "-" index) + :entry entry}])]))) diff --git a/frontend/src/app/main/ui/shapes/frame.cljs b/frontend/src/app/main/ui/shapes/frame.cljs index b95c887dd8..9b181c4caa 100644 --- a/frontend/src/app/main/ui/shapes/frame.cljs +++ b/frontend/src/app/main/ui/shapes/frame.cljs @@ -98,8 +98,8 @@ [:g.frame-container-wrapper {:opacity opacity} [:g.frame-container-blur {:filter filter-str-blur} [:defs - [:& filters/filters {:shape (dissoc shape :blur) :filter-id filter-id-shadows}] - [:& filters/filters {:shape (assoc shape :shadow []) :filter-id filter-id-blur}]] + [:> filters/filters* {:shape (dissoc shape :blur) :filter-id filter-id-shadows}] + [:> filters/filters* {:shape (assoc shape :shadow []) :filter-id filter-id-blur}]] ;; This need to be separated in two layers so the clip doesn't affect the shadow filters ;; otherwise the shadow will be clipped and not visible diff --git a/frontend/src/app/main/ui/shapes/shape.cljs b/frontend/src/app/main/ui/shapes/shape.cljs index 63048f3122..ad30274607 100644 --- a/frontend/src/app/main/ui/shapes/shape.cljs +++ b/frontend/src/app/main/ui/shapes/shape.cljs @@ -130,9 +130,9 @@ ;; The filters for frames should be setup inside the container. (when-not (cfh/frame-shape? shape) [:* - [:& filters/filters {:shape shape :filter-id filter-id}] - [:& filters/filters {:shape shape-without-blur :filter-id (dm/fmt "filter-shadow-%" render-id)}] - [:& filters/filters {:shape shape-without-shadows :filter-id (dm/fmt "filter-blur-%" render-id)}]]) + [:> filters/filters* {:shape shape :filter-id filter-id}] + [:> filters/filters* {:shape shape-without-blur :filter-id (dm/fmt "filter-shadow-%" render-id)}] + [:> filters/filters* {:shape shape-without-shadows :filter-id (dm/fmt "filter-blur-%" render-id)}]]) [:& frame/frame-clip-def {:shape shape :render-id render-id}]