3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-13 04:31:40 +02:00
Code Issues Projects Releases Packages Wiki Activity

🎉 Allow masked groups

Browse source
This commit is contained in:
Andrés Moya 2020-10-15 10:59:23 +02:00 • committed by Alonso Torres
parent ad66955a54
commit ee89b2e7f4
14 changed files with 207 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

42
frontend/src/app/main/ui/shapes/custom_stroke.cljs
View file

@ -9,6 +9,7 @@
[rumext.alpha :as mf]
[app.common.uuid :as uuid]
[app.common.geom.shapes :as geom]
[app.main.ui.shapes.group :refer [mask-id-ctx]]
[app.util.object :as obj]))
; The SVG standard does not implement yet the 'stroke-alignment'
@ -23,13 +24,16 @@
base-props (unchecked-get props "base-props")
elem-name (unchecked-get props "elem-name")
{:keys [x y width height]} (geom/shape->rect-shape shape)
mask-id (mf/use-ctx mask-id-ctx)
stroke-id (mf/use-var (uuid/next))
stroke-style (:stroke-style shape :none)
stroke-position (:stroke-alignment shape :center)]
(cond
;; Center alignment (or no stroke): the default in SVG
(or (= stroke-style :none) (= stroke-position :center))
[:> elem-name base-props]
[:> elem-name (cond-> (obj/merge! #js {} base-props)
(some? mask-id)
(obj/merge! #js {:mask mask-id}))]
;; Inner alignment: display the shape with double width stroke,
;; and clip the result with the original shape without stroke.
@ -49,10 +53,15 @@
shape-props (-> (obj/merge! #js {} base-props)
(obj/merge! #js {:strokeWidth (* stroke-width 2)
:clipPath (str "url('#" clip-id "')")}))]
[:*
[:> "clipPath" #js {:id clip-id}
[:> elem-name clip-props]]
[:> elem-name shape-props]])
(if (nil? mask-id)
[:*
[:> "clipPath" #js {:id clip-id}
[:> elem-name clip-props]]
[:> elem-name shape-props]]
[:g {:mask mask-id}
[:> "clipPath" #js {:id clip-id}
[:> elem-name clip-props]]
[:> elem-name shape-props]]))
;; Outer alingmnent: display the shape in two layers. One
;; without stroke (only fill), and another one only with stroke
@ -61,7 +70,7 @@
;; without stroke
(= stroke-position :outer)
(let [mask-id (str "mask-" @stroke-id)
(let [stroke-mask-id (str "mask-" @stroke-id)
stroke-width (.-strokeWidth ^js base-props)
mask-props1 (-> (obj/merge! #js {} base-props)
(obj/merge! #js {:stroke "white"
@ -89,11 +98,18 @@
(obj/merge! #js {:strokeWidth (* stroke-width 2)
:fill "none"
:fillOpacity 0
:mask (str "url('#" mask-id "')")}))]
[:*
[:mask {:id mask-id}
[:> elem-name mask-props1]
[:> elem-name mask-props2]]
[:> elem-name shape-props1]
[:> elem-name shape-props2]]))))
:mask (str "url('#" stroke-mask-id "')")}))]
(if (nil? mask-id)
[:*
[:mask {:id mask-id}
[:> elem-name mask-props1]
[:> elem-name mask-props2]]
[:> elem-name shape-props1]
[:> elem-name shape-props2]]
[:g {:mask mask-id}
[:mask {:id stroke-mask-id}
[:> elem-name mask-props1]
[:> elem-name mask-props2]]
[:> elem-name shape-props1]
[:> elem-name shape-props2]])))))