diff --git a/CHANGES.md b/CHANGES.md index c16729c42..6334e4f3d 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -46,6 +46,7 @@ - Makes height priority for the rows/columns grids [#2774](https://github.com/penpot/penpot/issues/2774) - Fix problem with comments mode not staying [#3363](https://github.com/penpot/penpot/issues/3363) - Fix problem with comments when user left the team [Taiga #5562](https://tree.taiga.io/project/penpot/issue/5562) +- Fix problem with images patterns repeating [#3372](https://github.com/penpot/penpot/issues/3372) ### :arrow_up: Deps updates diff --git a/frontend/src/app/main/ui/shapes/fills.cljs b/frontend/src/app/main/ui/shapes/fills.cljs index 668ba8c39..de37f1560 100644 --- a/frontend/src/app/main/ui/shapes/fills.cljs +++ b/frontend/src/app/main/ui/shapes/fills.cljs @@ -16,6 +16,8 @@ [app.util.object :as obj] [rumext.v2 :as mf])) +(def no-repeat-padding 1.05) + (mf/defc fills {::mf/wrap-props false} [props] @@ -71,7 +73,10 @@ (let [fill-id (dm/str "fill-" shape-index "-" render-id)] [:> :pattern (-> (obj/clone pattern-attrs) - (obj/set! "id" fill-id)) + (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] (-> (d/enumerate (:fills shape [])) reverse)] [:> :rect (-> (attrs/extract-fill-attrs value render-id fill-index type) @@ -80,7 +85,17 @@ (obj/set! "height" height))]) (when has-image? - [:image {:href (or (:data-uri shape) (get embed uri uri)) - :preserveAspectRatio "none" - :width width - :height height}])]])]))))) + [: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}]])]])])))))