diff --git a/frontend/src/app/main/ui/shapes/attrs.cljs b/frontend/src/app/main/ui/shapes/attrs.cljs index 43fb21123..5c148d26d 100644 --- a/frontend/src/app/main/ui/shapes/attrs.cljs +++ b/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) diff --git a/frontend/src/app/main/ui/shapes/custom_stroke.cljs b/frontend/src/app/main/ui/shapes/custom_stroke.cljs index e855405a1..43c9d607a 100644 --- a/frontend/src/app/main/ui/shapes/custom_stroke.cljs +++ b/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 diff --git a/frontend/src/app/main/ui/shapes/frame.cljs b/frontend/src/app/main/ui/shapes/frame.cljs index 64bd709f9..970e1ce7f 100644 --- a/frontend/src/app/main/ui/shapes/frame.cljs +++ b/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) diff --git a/frontend/src/app/main/ui/shapes/shape.cljs b/frontend/src/app/main/ui/shapes/shape.cljs index 39e13482d..47b32bf52 100644 --- a/frontend/src/app/main/ui/shapes/shape.cljs +++ b/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)))) diff --git a/frontend/src/app/main/ui/shapes/text/fo_text.cljs b/frontend/src/app/main/ui/shapes/text/fo_text.cljs index 7e2ebc504..1f7836cc0 100644 --- a/frontend/src/app/main/ui/shapes/text/fo_text.cljs +++ b/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`