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