3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-16 21:01:38 +02:00
Code Issues Projects Releases Packages Wiki Activity

⚡ Add minor optimizations to fills component (shapes)

Browse source
This commit is contained in:
Andrey Antukh 2023-09-12 12:02:25 +02:00
parent 281251ff87
commit 85a1f7d69e
1 changed files with 43 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

58
frontend/src/app/main/ui/shapes/fills.cljs
View file

@ -22,45 +22,57 @@
{::mf/wrap-props false} {::mf/wrap-props false}
[props] [props]
(let [shape (obj/get props "shape") (let [shape (unchecked-get props "shape")
render-id (obj/get props "render-id")] render-id (unchecked-get props "render-id")
(when (or (some? (:fill-image shape)) shape-type (dm/get-prop shape :type)
(#{:image :text} (:type shape)) fill-image (:fill-image shape)
(> (count (:fills shape)) 1) shape-fills (:fills shape [])]
(some :fill-color-gradient (:fills shape)))
(let [{:keys [x y width height]} (:selrect shape) (when (or (some? fill-image)
{:keys [metadata]} shape (or (= shape-type :image)
(= shape-type :text))
(> (count shape-fills) 1)
(some :fill-color-gradient shape-fills))
has-image? (or metadata (:fill-image shape)) (let [selrect (dm/get-prop shape :selrect)
metadata (get shape :metadata)
x (dm/get-prop selrect :x)
y (dm/get-prop selrect :y)
width (dm/get-prop selrect :width)
height (dm/get-prop selrect :height)
has-image? (or (some? metadata)
(some? fill-image))
uri (cond uri (cond
metadata (some? metadata)
(cfg/resolve-file-media metadata) (cfg/resolve-file-media metadata)
(:fill-image shape) (some? fill-image)
(cfg/resolve-file-media (:fill-image shape))) (cfg/resolve-file-media fill-image))
embed (embed/use-data-uris [uri]) embed (embed/use-data-uris [uri])
transform (gsh/transform-str shape) transform (gsh/transform-str shape)
;; When true the image has not loaded yet ;; When true the image has not loaded yet
loading? (and (some? uri) (not (contains? embed uri))) loading? (and (some? uri)
(not (contains? embed uri)))
pattern-attrs (cond-> #js {:patternUnits "userSpaceOnUse" pat-props #js {:patternUnits "userSpaceOnUse"
:x x :x x
:y y :y y
:height height
:width width :width width
:height height
:data-loading loading?} :data-loading loading?}
(= :path (:type shape))
(obj/set! "patternTransform" transform)) pat-props (if (= :path shape-type)
type (:type shape)] (obj/set! pat-props "patternTransform" transform)
pat-props)]
(for [[shape-index shape] (d/enumerate (or (:position-data shape) [shape]))] (for [[shape-index shape] (d/enumerate (or (:position-data shape) [shape]))]
[:* {:key (dm/str shape-index)} [:* {:key (dm/str shape-index)}
(for [[fill-index value] (-> (d/enumerate (:fills shape [])) reverse)] (for [[fill-index value] (reverse (d/enumerate shape-fills))]
(when (some? (:fill-color-gradient value)) (when (some? (:fill-color-gradient value))
(let [gradient (:fill-color-gradient value) (let [gradient (:fill-color-gradient value)
props #js {:id (dm/str "fill-color-gradient_" render-id "_" fill-index) props #js {:id (dm/str "fill-color-gradient_" render-id "_" fill-index)
@ -73,21 +85,21 @@
(let [fill-id (dm/str "fill-" shape-index "-" render-id)] (let [fill-id (dm/str "fill-" shape-index "-" render-id)]
[:> :pattern (-> (obj/clone pattern-attrs) [:> :pattern (-> (obj/clone pat-props)
(obj/set! "id" fill-id) (obj/set! "id" fill-id)
(cond-> has-image? (cond-> has-image?
(-> (obj/set! "width" (* width no-repeat-padding)) (-> (obj/set! "width" (* width no-repeat-padding))
(obj/set! "height" (* height no-repeat-padding))))) (obj/set! "height" (* height no-repeat-padding)))))
[:g [:g
(for [[fill-index value] (-> (d/enumerate (:fills shape [])) reverse)] (for [[fill-index value] (reverse (d/enumerate shape-fills))]
(let [style (attrs/get-fill-style value fill-index render-id type) (let [style (attrs/get-fill-style value fill-index render-id shape-type)
props #js {:key (dm/str fill-index) props #js {:key (dm/str fill-index)
:width width :width width
:height height :height height
:style style}] :style style}]
[:> :rect props])) [:> :rect props]))
(when has-image? (when ^boolean has-image?
[:g [:g
;; We add this shape to add a padding so the patter won't repeat ;; We add this shape to add a padding so the patter won't repeat
;; Issue: https://tree.taiga.io/project/penpot/issue/5583 ;; Issue: https://tree.taiga.io/project/penpot/issue/5583