Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-13 16:21:57 -05:00
Code Issues Activity

⚡ Add minor optimizations to shapes/mask component

Browse source
This commit is contained in:
Andrey Antukh 2023-09-06 14:44:58 +02:00
parent 7f9e01711f
commit d9c496b131
1 changed files with 41 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -9,6 +9,7 @@
[app.common.data :as d]
[app.common.data.macros :as dm]
[app.common.geom.rect :as grc]
[app.common.pages.helpers :as cph]
[app.main.ui.context :as muc]
[cuerdas.core :as str]
[rumext.v2 :as mf]))
@ -42,17 +43,39 @@
(d/update-when :position-data #(mapv update-color %))
(assoc :stroke-color "#FFFFFF" :stroke-opacity 1))))
(defn- point->str
[point]
(dm/str (dm/get-prop point :x) "," (dm/get-prop point :y)))
(defn mask-factory
[shape-wrapper]
(mf/fnc mask-shape
{::mf/wrap-props false}
[props]
(let [mask (unchecked-get props "mask")
render-id (mf/use-ctx muc/render-id)
svg-text? (and (= :text (:type mask)) (some? (:position-data mask)))
(let [mask (unchecked-get props "mask")
render-id (mf/use-ctx muc/render-id)
svg-text? (and ^boolean (cph/text-shape? mask)
^boolean (some? (:position-data mask)))
points (dm/get-prop mask :points)
points-str (mf/with-memo [points]
(->> (map point->str points)
(str/join " ")))
bounds (mf/with-memo [points]
(grc/points->rect points))
bx (dm/get-prop bounds :x)
by (dm/get-prop bounds :y)
bw (dm/get-prop bounds :width)
bh (dm/get-prop bounds :height)
shape (mf/with-memo [mask]
(-> mask
(dissoc :shadow :blur)
(assoc :is-mask? true)))]
mask-bb (:points mask)
mask-bb-rect (grc/points->rect mask-bb)]
[:defs
[:filter {:id (filter-id render-id mask)}
[:feFlood {:flood-color "white"
@ -66,26 +89,26 @@
;; we cannot use clips instead of mask because clips can only be simple shapes
[:clipPath {:class "mask-clip-path"
:id (clip-id render-id mask)}
[:polyline {:points (->> mask-bb
(map #(dm/str (:x %) "," (:y %)))
(str/join " "))}]]
[:polyline {:points points-str}]]
;; When te shape is a text we pass to the shape the info and disable the filter.
;; There is a bug in Firefox with filters and texts. We change the text to white at shape level
[:mask {:class "mask-shape"
:id (mask-id render-id mask)
:x (:x mask-bb-rect)
:y (:y mask-bb-rect)
:width (:width mask-bb-rect)
:height (:height mask-bb-rect)
:x bx
:y by
:width bw
:height bh
;; This is necesary to prevent a race condition in the dynamic-modifiers whether the modifier
;; triggers afte the render
:data-old-x (:x mask-bb-rect)
:data-old-y (:y mask-bb-rect)
:data-old-width (:width mask-bb-rect)
:data-old-height (:height mask-bb-rect)
:data-old-x bx
:data-old-y by
:data-old-width bw
:data-old-height bh
:mask-units "userSpaceOnUse"}
[:g {:filter (when-not svg-text? (filter-url render-id mask))}
[:& shape-wrapper {:shape (-> mask (dissoc :shadow :blur) (assoc :is-mask? true))}]]]])))
[:g {:filter (when-not ^boolean svg-text?
(filter-url render-id mask))}
[:& shape-wrapper {:shape shape}]]]])))