3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-08-07 14:38:33 +02:00
Code Issues Projects Releases Packages Wiki Activity

🐛 Fixes problems with masks rotation and some clipping problems

Browse source
This commit is contained in:
alonso.torres 2020-12-08 11:35:14 +01:00 • committed by Hirunatan
parent 34af5e4563
commit 3a8a212432
10 changed files with 95 additions and 104 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -9,7 +9,6 @@
[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'
@ -25,16 +24,13 @@
elem-name (unchecked-get props "elem-name")
;; {:keys [x y width height]} (geom/shape->rect-shape shape)
{:keys [x y width height]} (:selrect 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 (cond-> (obj/merge! #js {} base-props)
(some? mask-id)
(obj/merge! #js {:mask mask-id}))]
[:> elem-name (obj/merge! #js {} base-props)]
;; Inner alignment: display the shape with double width stroke,
;; and clip the result with the original shape without stroke.
@ -54,15 +50,10 @@
shape-props (-> (obj/merge! #js {} base-props)
(obj/merge! #js {:strokeWidth (* stroke-width 2)
:clipPath (str "url('#" clip-id "')")}))]
(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]]))
[:*
[:> "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
@ -100,17 +91,10 @@
:fill "none"
:fillOpacity 0
: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]])))))
[:*
[:mask {:id stroke-mask-id}
[:> elem-name mask-props1]
[:> elem-name mask-props2]]
[:> elem-name shape-props1]
[:> elem-name shape-props2]]))))