mirror of
https://github.com/penpot/penpot.git
synced 2025-03-15 01:01:30 -05:00
⚡ Add minor optimizations to shapes/mask component
This commit is contained in:
parent
7f9e01711f
commit
d9c496b131
1 changed files with 41 additions and 18 deletions
|
@ -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}]]]])))
|
||||||
|
|
||||||
|
|
Loading…
Add table
Reference in a new issue