♻️ Migrate svg filter components to modern syntax (#9448)

Co-authored-by: Andrey Antukh <niwi@niwi.nz>

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}])])))
 

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

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