mirror of
https://github.com/penpot/penpot.git
synced 2025-08-07 14:38:33 +02:00
🐛 Fix broken hooks rule on shapes fills component
This commit is contained in:
Andrey Antukh
parent
385fd9c4e6
commit
393863b29f
1 changed files with 99 additions and 92 deletions
|
|
@ -18,101 +18,108 @@
|
||||||
|
|
||||||
(def no-repeat-padding 1.05)
|
(def no-repeat-padding 1.05)
|
||||||
|
|
||||||
;; FIXME: this component breaks hooks rules
|
(mf/defc fills*
|
||||||
|
{::mf/wrap-props false}
|
||||||
|
[props]
|
||||||
|
(let [shape (unchecked-get props "shape")
|
||||||
|
render-id (unchecked-get props "render-id")
|
||||||
|
|
||||||
|
type (dm/get-prop shape :type)
|
||||||
|
image (get shape :fill-image)
|
||||||
|
fills (get shape :fills [])
|
||||||
|
|
||||||
|
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? image))
|
||||||
|
|
||||||
|
uri (cond
|
||||||
|
(some? metadata)
|
||||||
|
(cfg/resolve-file-media metadata)
|
||||||
|
|
||||||
|
(some? image)
|
||||||
|
(cfg/resolve-file-media image))
|
||||||
|
|
||||||
|
embed (embed/use-data-uris [uri])
|
||||||
|
transform (gsh/transform-str shape)
|
||||||
|
|
||||||
|
;; When tru e the image has not loaded yet
|
||||||
|
loading? (and (some? uri)
|
||||||
|
(not (contains? embed uri)))
|
||||||
|
|
||||||
|
pat-props #js {:patternUnits "userSpaceOnUse"
|
||||||
|
:x x
|
||||||
|
:y y
|
||||||
|
:width width
|
||||||
|
:height height
|
||||||
|
:data-loading loading?}
|
||||||
|
|
||||||
|
pat-props (if (= :path type)
|
||||||
|
(obj/set! pat-props "patternTransform" transform)
|
||||||
|
pat-props)]
|
||||||
|
|
||||||
|
(for [[shape-index shape] (d/enumerate (or (:position-data shape) [shape]))]
|
||||||
|
[:* {:key (dm/str shape-index)}
|
||||||
|
(for [[fill-index value] (reverse (d/enumerate fills))]
|
||||||
|
(when (some? (:fill-color-gradient value))
|
||||||
|
(let [gradient (:fill-color-gradient value)
|
||||||
|
props #js {:id (dm/str "fill-color-gradient_" render-id "_" fill-index)
|
||||||
|
:key (dm/str fill-index)
|
||||||
|
:gradient gradient
|
||||||
|
:shape shape}]
|
||||||
|
(case (:type gradient)
|
||||||
|
:linear [:> grad/linear-gradient props]
|
||||||
|
:radial [:> grad/radial-gradient props]))))
|
||||||
|
|
||||||
|
|
||||||
|
(let [fill-id (dm/str "fill-" shape-index "-" render-id)]
|
||||||
|
[:> :pattern (-> (obj/clone pat-props)
|
||||||
|
(obj/set! "id" fill-id)
|
||||||
|
(cond-> has-image?
|
||||||
|
(-> (obj/set! "width" (* width no-repeat-padding))
|
||||||
|
(obj/set! "height" (* height no-repeat-padding)))))
|
||||||
|
[:g
|
||||||
|
(for [[fill-index value] (reverse (d/enumerate fills))]
|
||||||
|
(let [style (attrs/get-fill-style value fill-index render-id type)
|
||||||
|
props #js {:key (dm/str fill-index)
|
||||||
|
:width width
|
||||||
|
:height height
|
||||||
|
:style style}]
|
||||||
|
[:> :rect props]))
|
||||||
|
|
||||||
|
(when ^boolean has-image?
|
||||||
|
[:g
|
||||||
|
;; We add this shape to add a padding so the patter won't repeat
|
||||||
|
;; Issue: https://tree.taiga.io/project/penpot/issue/5583
|
||||||
|
[:rect {:x 0
|
||||||
|
:y 0
|
||||||
|
:width (* width no-repeat-padding)
|
||||||
|
:height (* height no-repeat-padding)
|
||||||
|
:fill "none"}]
|
||||||
|
[:image {:href (or (:data-uri shape) (get embed uri uri))
|
||||||
|
:preserveAspectRatio "none"
|
||||||
|
:x 0
|
||||||
|
:y 0
|
||||||
|
:width width
|
||||||
|
:height height}]])]])])))
|
||||||
|
|
||||||
(mf/defc fills
|
(mf/defc fills
|
||||||
{::mf/wrap-props false}
|
{::mf/wrap-props false}
|
||||||
[props]
|
[props]
|
||||||
|
|
||||||
(let [shape (unchecked-get props "shape")
|
(let [shape (unchecked-get props "shape")
|
||||||
render-id (unchecked-get props "render-id")
|
type (dm/get-prop shape :type)
|
||||||
|
image (:fill-image shape)
|
||||||
|
fills (:fills shape [])]
|
||||||
|
|
||||||
shape-type (dm/get-prop shape :type)
|
(when (or (some? image)
|
||||||
fill-image (:fill-image shape)
|
(or (= type :image)
|
||||||
shape-fills (:fills shape [])]
|
(= type :text))
|
||||||
|
(> (count fills) 1)
|
||||||
(when (or (some? fill-image)
|
(some :fill-color-gradient fills))
|
||||||
(or (= shape-type :image)
|
[:> fills* props])))
|
||||||
(= shape-type :text))
|
|
||||||
(> (count shape-fills) 1)
|
|
||||||
(some :fill-color-gradient shape-fills))
|
|
||||||
|
|
||||||
(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
|
|
||||||
(some? metadata)
|
|
||||||
(cfg/resolve-file-media metadata)
|
|
||||||
|
|
||||||
(some? fill-image)
|
|
||||||
(cfg/resolve-file-media fill-image))
|
|
||||||
|
|
||||||
embed (embed/use-data-uris [uri])
|
|
||||||
transform (gsh/transform-str shape)
|
|
||||||
|
|
||||||
;; When true the image has not loaded yet
|
|
||||||
loading? (and (some? uri)
|
|
||||||
(not (contains? embed uri)))
|
|
||||||
|
|
||||||
pat-props #js {:patternUnits "userSpaceOnUse"
|
|
||||||
:x x
|
|
||||||
:y y
|
|
||||||
:width width
|
|
||||||
:height height
|
|
||||||
:data-loading loading?}
|
|
||||||
|
|
||||||
pat-props (if (= :path shape-type)
|
|
||||||
(obj/set! pat-props "patternTransform" transform)
|
|
||||||
pat-props)]
|
|
||||||
|
|
||||||
(for [[shape-index shape] (d/enumerate (or (:position-data shape) [shape]))]
|
|
||||||
[:* {:key (dm/str shape-index)}
|
|
||||||
(for [[fill-index value] (reverse (d/enumerate shape-fills))]
|
|
||||||
(when (some? (:fill-color-gradient value))
|
|
||||||
(let [gradient (:fill-color-gradient value)
|
|
||||||
props #js {:id (dm/str "fill-color-gradient_" render-id "_" fill-index)
|
|
||||||
:key (dm/str fill-index)
|
|
||||||
:gradient gradient
|
|
||||||
:shape shape}]
|
|
||||||
(case (:type gradient)
|
|
||||||
:linear [:> grad/linear-gradient props]
|
|
||||||
:radial [:> grad/radial-gradient props]))))
|
|
||||||
|
|
||||||
|
|
||||||
(let [fill-id (dm/str "fill-" shape-index "-" render-id)]
|
|
||||||
[:> :pattern (-> (obj/clone pat-props)
|
|
||||||
(obj/set! "id" fill-id)
|
|
||||||
(cond-> has-image?
|
|
||||||
(-> (obj/set! "width" (* width no-repeat-padding))
|
|
||||||
(obj/set! "height" (* height no-repeat-padding)))))
|
|
||||||
[:g
|
|
||||||
(for [[fill-index value] (reverse (d/enumerate shape-fills))]
|
|
||||||
(let [style (attrs/get-fill-style value fill-index render-id shape-type)
|
|
||||||
props #js {:key (dm/str fill-index)
|
|
||||||
:width width
|
|
||||||
:height height
|
|
||||||
:style style}]
|
|
||||||
[:> :rect props]))
|
|
||||||
|
|
||||||
(when ^boolean has-image?
|
|
||||||
[:g
|
|
||||||
;; We add this shape to add a padding so the patter won't repeat
|
|
||||||
;; Issue: https://tree.taiga.io/project/penpot/issue/5583
|
|
||||||
[:rect {:x 0
|
|
||||||
:y 0
|
|
||||||
:width (* width no-repeat-padding)
|
|
||||||
:height (* height no-repeat-padding)
|
|
||||||
:fill "none"}]
|
|
||||||
[:image {:href (or (:data-uri shape) (get embed uri uri))
|
|
||||||
:preserveAspectRatio "none"
|
|
||||||
:x 0
|
|
||||||
:y 0
|
|
||||||
:width width
|
|
||||||
:height height}]])]])])))))
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue