🐛 Fix uneven layer opacities

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

@@ -148,17 +148,6 @@
 
     attrs))
 
-(defn add-layer-styles!
-  [props shape]
-  (let [opacity (:opacity shape)]
-    (if (some? opacity)
-      (obj/set! props "opacity" opacity)
-      props)))
-
-(defn get-layer-styles
-  [shape]
-  (add-layer-styles! #js {} shape))
-
 (defn get-svg-props
   [shape render-id]
   (let [attrs (get shape :svg-attrs {})
@@ -195,8 +184,7 @@
 
          style        (-> (obj/get props "style")
                           (obj/clone)
-                          (obj/merge! svg-styles)
-                          (add-layer-styles! shape))
+                          (obj/merge! svg-styles))
 
          url-fill?    (or ^boolean (some? (:fill-image shape))
                           ^boolean (cfh/image-shape? shape)

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

@@ -476,8 +476,7 @@
         svg-attrs     (attrs/get-svg-props shape render-id)
 
         style         (-> (obj/get props "style")
-                          (obj/clone)
-                          (attrs/add-layer-styles! shape))
+                          (obj/clone))
 
         props        (mf/spread-props svg-attrs
                                       {:id stroke-id

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

@@ -69,6 +69,7 @@
         y             (dm/get-prop shape :y)
         w             (dm/get-prop shape :width)
         h             (dm/get-prop shape :height)
+        opacity       (dm/get-prop shape :opacity)
         transform     (gsh/transform-str shape)
 
         show-content? (get shape :show-content)
@@ -92,7 +93,8 @@
           ;; transparent). It may have been changed to default black
           ;; if a shape coming from an imported SVG file is
           ;; rendered. See main.ui.shapes.attrs/add-style-attrs.
-          :fill "none"}
+          :fill "none"
+          :opacity opacity}
 
       [:& shape-fills {:shape shape}
        (if ^boolean path?
@@ -171,7 +173,7 @@
                           (ctl/sort-layout-children-z-index))]
 
       [:> frame-container props
-       [:g.frame-children {:opacity (:opacity shape)}
+       [:g.frame-children
         (for [item childs]
           (let [id (dm/get-prop item :id)]
             (when (some? id)

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

@@ -70,6 +70,8 @@
         filter-id        (dm/str "filter-" render-id)
         styles           (-> (obj/create)
                              (obj/set! "pointerEvents" pointer-events)
+                             (cond-> (not (cfh/frame-shape? shape))
+                               (obj/set! "opacity" (:opacity shape)))
                              (cond-> (and blend-mode (not= blend-mode :normal))
                                (obj/set! "mixBlendMode" (d/name blend-mode))))
 

frontend/src/app/main/ui/shapes/text/fo_text.cljs

@@ -10,7 +10,6 @@
    [app.common.data :as d]
    [app.common.data.macros :as dm]
    [app.common.geom.shapes :as gsh]
-   [app.main.ui.shapes.attrs :as attrs]
    [app.main.ui.shapes.text.styles :as sts]
    [app.util.object :as obj]
    [cuerdas.core :as str]
@@ -192,7 +191,6 @@
       :transform transform
       :width  (if (#{:auto-width} grow-type) 100000 width)
       :height (if (#{:auto-height :auto-width} grow-type) 100000 height)
-      :style  (attrs/get-layer-styles shape)
       :ref ref}
      ;; We use a class here because react has a bug that won't use the appropriate selector for
      ;; `background-clip`