Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-08 07:50:43 -05:00
Code Issues Activity

🐛 Fix problem with masking images in viewer

Browse source
This commit is contained in:
alonso.torres 2021-09-23 11:26:03 +02:00
parent f0a02e4734
commit 2f8960d34f
3 changed files with 36 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
CHANGES.md
View file

@ -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

9
frontend/src/app/main/ui/shapes/group.cljs
View file

@ -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! "mask" (mask-str mask)))]
(obj/set! "clipPath" (clip-url render-id mask))
(obj/set! "mask" (mask-url render-id mask)))]
[mf/Fragment nil])]
[:> mask-wrapper mask-props

31
frontend/src/app/main/ui/shapes/mask.cljs
View file

@ -7,14 +7,27 @@
(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]
(str/fmt "url(#%s)" (str (:id mask) "-mask")))
(defn mask-id [render-id mask]
(str render-id "-" (:id mask) "-mask"))
(defn clip-str [mask]
(str/fmt "url(#%s)" (str (:id mask) "-clip")))
(defn mask-url [render-id mask]
(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]
@ -23,11 +36,13 @@
[props]
(let [frame (unchecked-get props "frame")
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")}
[:g {:filter (str/fmt "url(#%s)" (str (:id mask) "-filter"))}
[:mask {:id (mask-id render-id mask)}
[:g {:filter (filter-url render-id mask)}
[:& shape-wrapper {:frame frame
:shape (-> mask
(dissoc :shadow :blur))}]]]])))