🐛 Fix problem with masking images in viewer

CHANGES.md

@@ -9,6 +9,12 @@
 ### :boom: Breaking changes
 ### :heart: Community contributions by (Thank you!)
 
+## 1.8.2-alpha
+
+### :bug: Bugs fixed
+
+- Fix problem with masking images in viewer [#1238](https://github.com/penpot/penpot/issues/1238)
+
 ## 1.8.1-alpha
 
 ### :bug: Bugs fixed

frontend/src/app/main/ui/shapes/group.cljs

@@ -6,7 +6,8 @@
 
 (ns app.main.ui.shapes.group
   (:require
-   [app.main.ui.shapes.mask :refer [mask-str clip-str mask-factory]]
+   [app.main.ui.context :as muc]
+   [app.main.ui.shapes.mask :refer [mask-url clip-url mask-factory]]
    [app.util.object :as obj]
    [rumext.alpha :as mf]))
 
@@ -19,7 +20,7 @@
       (let [frame          (unchecked-get props "frame")
             shape          (unchecked-get props "shape")
             childs         (unchecked-get props "childs")
-
+            render-id      (mf/use-ctx muc/render-ctx)
             masked-group?  (:masked-group? shape)
 
             [mask childs]  (if masked-group?
@@ -29,8 +30,8 @@
             [mask-wrapper mask-props]
             (if masked-group?
               ["g" (-> (obj/new)
-                       (obj/set! "clipPath" (clip-str mask))
+                       (obj/set! "clipPath" (clip-url render-id mask))
-                       (obj/set! "mask"     (mask-str mask)))]
+                       (obj/set! "mask"     (mask-url render-id mask)))]
               [mf/Fragment nil])]
 
         [:> mask-wrapper mask-props

frontend/src/app/main/ui/shapes/mask.cljs

@@ -7,27 +7,42 @@
 (ns app.main.ui.shapes.mask
   (:require
    [app.common.geom.shapes :as gsh]
+   [app.main.ui.context :as muc]
    [cuerdas.core :as str]
    [rumext.alpha :as mf]))
 
-(defn mask-str [mask]
+(defn mask-id [render-id mask]
-  (str/fmt "url(#%s)" (str (:id mask) "-mask")))
+  (str render-id "-" (:id mask) "-mask"))
 
-(defn clip-str [mask]
+(defn mask-url [render-id mask]
-  (str/fmt "url(#%s)" (str (:id mask) "-clip")))
+  (str "url(#" (mask-id render-id mask) ")"))
+
+(defn clip-id [render-id mask]
+  (str render-id "-" (:id mask) "-clip"))
+
+(defn clip-url [render-id mask]
+  (str "url(#" (clip-id render-id mask) ")"))
+
+(defn filter-id [render-id mask]
+  (str render-id "-" (:id mask) "-filter"))
+
+(defn filter-url [render-id mask]
+  (str "url(#" (filter-id render-id mask) ")"))
 
 (defn mask-factory
   [shape-wrapper]
   (mf/fnc mask-shape
     {::mf/wrap-props false}
     [props]
-    (let [frame (unchecked-get props "frame")
+    (let [frame     (unchecked-get props "frame")
-          mask (unchecked-get props "mask")
+          mask      (unchecked-get props "mask")
+          render-id (mf/use-ctx muc/render-ctx)
+
           mask' (-> mask
                     (gsh/transform-shape)
                     (gsh/translate-to-frame frame))]
       [:defs
-       [:filter {:id (str (:id mask) "-filter")}
+       [:filter {:id (filter-id render-id mask)}
         [:feFlood {:flood-color "white"
                    :result "FloodResult"}]
         [:feComposite {:in "FloodResult"
@@ -37,12 +52,12 @@
        ;; Clip path is necesary so the elements inside the mask won't affect
        ;; the events outside. Clip hides the elements but mask doesn't (like display vs visibility)
        ;; we cannot use clips instead of mask because clips can only be simple shapes
-       [:clipPath {:id (str (:id mask) "-clip")}
+       [:clipPath {:id (clip-id render-id mask)}
         [:polyline {:points (->> (:points mask')
                                  (map #(str (:x %) "," (:y %)))
                                  (str/join " "))}]]
-       [:mask {:id (str (:id mask) "-mask")}
+       [:mask {:id (mask-id render-id mask)}
-        [:g {:filter (str/fmt "url(#%s)" (str (:id mask) "-filter"))}
+        [:g {:filter (filter-url render-id mask)}
          [:& shape-wrapper {:frame frame
                             :shape (-> mask
                                        (dissoc :shadow :blur))}]]]])))