🐛 Fixed issues with masks when coloring

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

@@ -10,42 +10,37 @@
 (ns app.main.ui.shapes.group
   (:require
    [rumext.alpha :as mf]
-   [cuerdas.core :as str]
-   [app.main.ui.shapes.attrs :as attrs]
-   [app.common.geom.shapes :as geom]))
+   [app.main.ui.shapes.mask :refer [mask-str mask-factory]]))
 
 (defn group-shape
   [shape-wrapper]
-  (mf/fnc group-shape
-    {::mf/wrap-props false}
-    [props]
-    (let [frame          (unchecked-get props "frame")
-          shape          (unchecked-get props "shape")
-          childs         (unchecked-get props "childs")
-          expand-mask    (unchecked-get props "expand-mask")
-          pointer-events (unchecked-get props "pointer-events")
-          mask        (if (and (:masked-group? shape) (not expand-mask))
-                        (first childs)
-                        nil)
-          childs      (if (and (:masked-group? shape) (not expand-mask))
-                        (rest childs)
-                        childs)
-          {:keys [id x y width height]} shape
-          transform (geom/transform-matrix shape)]
-      [:g.group {:pointer-events pointer-events
-                 :mask (when (and mask (not expand-mask))
-                         (str/fmt "url(#%s)" (:id mask)))}
-       (when mask
-         [:defs
-          [:mask {:id (:id mask)
-                  :width width
-                  :height height}
+  (let [render-mask (mask-factory shape-wrapper)]
+    (mf/fnc group-shape
+      {::mf/wrap-props false}
+      [props]
+      (let [frame          (unchecked-get props "frame")
+            shape          (unchecked-get props "shape")
+            childs         (unchecked-get props "childs")
+            expand-mask    (unchecked-get props "expand-mask")
+            pointer-events (unchecked-get props "pointer-events")
+
+            {:keys [id x y width height]} shape
+
+            show-mask?     (and (:masked-group? shape) (not expand-mask))
+            mask           (when show-mask? (first childs))
+            childs         (if show-mask? (rest childs) childs)]
+
+        [:g.group
+         {:pointer-events pointer-events
+          :mask (when (and mask (not expand-mask)) (mask-str mask))}
+
+         (when mask
+           [:> render-mask #js {:frame frame :mask mask}])
+
+         (for [item childs]
            [:& shape-wrapper {:frame frame
-                              :shape mask}]]])
-       (for [item childs]
-         [:& shape-wrapper {:frame frame
-                            :shape item
-                            :key (:id item)}])])))
+                              :shape item
+                              :key (:id item)}])]))))
 
 
 

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

@@ -0,0 +1,35 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; This Source Code Form is "Incompatible With Secondary Licenses", as
+;; defined by the Mozilla Public License, v. 2.0.
+;;
+;; Copyright (c) 2020 UXBOX Labs SL
+
+(ns app.main.ui.shapes.mask
+  (:require
+   [rumext.alpha :as mf]
+   [cuerdas.core :as str]))
+
+(defn mask-str [mask]
+  (str/fmt "url(#%s)" (str (:id mask) "-mask")))
+
+(defn mask-factory
+  [shape-wrapper]
+  (mf/fnc mask-shape
+    {::mf/wrap-props false}
+    [props]
+    (let [frame (unchecked-get props "frame")
+          mask  (unchecked-get props "mask")]
+      [:defs
+       [:filter {:id (str (:id mask) "-filter")}
+        [:feFlood {:flood-color "white"}]
+        [:feComposite {:in "BackgroundImage"
+                       :in2 "SourceGraphic"
+                       :operator "in"
+                       :result "comp"}]]
+       [:mask {:id (str (:id mask) "-mask")}
+        [:g {:filter (str/fmt "url(#%s)" (str (:id mask) "-filter"))}
+         [:& shape-wrapper {:frame frame :shape mask}]]]])))
+