🐛 Fix problem with images patterns repeating

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
 

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}]])]])])))))