From 1ee1cada9e5802abc087f6fae3363ef7c465b813 Mon Sep 17 00:00:00 2001
From: "alonso.torres" <alonso.torres@kaleidos.net>
Date: Fri, 23 Apr 2021 13:28:55 +0200
Subject: [PATCH] :bug: Fixes problems with blending modes

---
 CHANGES.md                                 | 1 +
 frontend/src/app/main/ui/shapes/attrs.cljs | 5 +----
 frontend/src/app/main/ui/shapes/shape.cljs | 6 +++++-
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/CHANGES.md b/CHANGES.md
index e1bf830ac..b3df748a5 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -28,6 +28,7 @@
 - Fix problem with pan and space [#811](https://github.com/penpot/penpot/issues/811)
 - Fix issue when parsing exponential numbers in paths
 - Remove legacy system user and team [#843](https://github.com/penpot/penpot/issues/843)
+- Fix problems with blending modes [#837](https://github.com/penpot/penpot/issues/837)
 - Fix problem with zoom an selection rect [#845](https://github.com/penpot/penpot/issues/845)
 - Fix problem displaying team statistics [#859](https://github.com/penpot/penpot/issues/859)
 - Fix problems with text editor selection [Taiga #1546](https://tree.taiga.io/project/penpot/issue/1546)
diff --git a/frontend/src/app/main/ui/shapes/attrs.cljs b/frontend/src/app/main/ui/shapes/attrs.cljs
index cb624ba17..8573682fd 100644
--- a/frontend/src/app/main/ui/shapes/attrs.cljs
+++ b/frontend/src/app/main/ui/shapes/attrs.cljs
@@ -121,10 +121,7 @@
 (defn add-layer-props [attrs shape]
   (cond-> attrs
     (:opacity shape)
-    (obj/set! "opacity" (:opacity shape))
-
-    (and (:blend-mode shape) (not= (:blend-mode shape) :normal))
-    (obj/set! "mixBlendMode" (d/name (:blend-mode shape)))))
+    (obj/set! "opacity" (:opacity shape))))
 
 (defn extract-svg-attrs
   [render-id svg-defs svg-attrs]
diff --git a/frontend/src/app/main/ui/shapes/shape.cljs b/frontend/src/app/main/ui/shapes/shape.cljs
index 95d1007d8..88df3cff8 100644
--- a/frontend/src/app/main/ui/shapes/shape.cljs
+++ b/frontend/src/app/main/ui/shapes/shape.cljs
@@ -6,6 +6,7 @@
 
 (ns app.main.ui.shapes.shape
   (:require
+   [app.common.data :as d]
    [app.common.uuid :as uuid]
    [app.main.ui.context :as muc]
    [app.main.ui.shapes.filters :as filters]
@@ -23,7 +24,10 @@
         render-id      (mf/use-memo #(str (uuid/next)))
         filter-id      (str "filter_" render-id)
         styles         (-> (obj/new)
-                           (obj/set! "pointerEvents" pointer-events))
+                           (obj/set! "pointerEvents" pointer-events)
+
+                           (cond-> (and (:blend-mode shape) (not= (:blend-mode shape) :normal))
+                             (obj/set! "mixBlendMode" (d/name (:blend-mode shape)))))
 
         {:keys [x y width height type]} shape
         frame? (= :frame type)