Merge pull request #643 from penpot/fix/problem-handoff-artboard

Fix problem width handoff code generation

CHANGES.md

@@ -11,7 +11,7 @@
 
 - Properly handle errors on github, gitlab and ldap auth backends.
 - Properly mark profile auth backend (on first register/ auth with 3rd party auth provider).
-
+- Fix problem width handoff code generation [Taiga #1204](https://tree.taiga.io/project/penpot/issue/1204)
 
 
 ## 1.2.0-alpha

frontend/src/app/main/ui/shapes/filters.cljs

@@ -124,12 +124,13 @@
 (defn get-filters-bounds
   [shape filters blur-value]
 
-  (if (and (= :svg-raw (:type shape))
-           (not= :svg (get-in shape [:content :tag])))
-
+  (let [svg-root? (and (= :svg-raw (:type shape)) (not= :svg (get-in shape [:content :tag])))
+        frame? (= :frame (:type shape))
+        {:keys [x y width height]} (:selrect shape)]
+    (if svg-root?
       ;; When is a raw-svg but not the root we use the whole svg as bound for the filter. Is the maximum
       ;; we're allowed to display
-    {:x 0 :y 0 :width (get-in shape [:selrect :width]) :height (get-in shape [:selrect :height])}
+      {:x 0 :y 0 :width width :height height}
 
       ;; Otherwise we calculate the bound
       (let [filter-bounds (->> filters
@@ -147,10 +148,12 @@
             y1 (- y1 (* blur-value 2))
             y2 (+ y2 (* blur-value 2))]
 
-      {:x x1
-       :y y1
+        ;; We should move the frame filter coordinates because they should be
+        ;; relative with the frame. By default they come as absolute
+        {:x (if frame? (- x1 x) x1)
+         :y (if frame? (- y1 y) y1)
          :width (- x2 x1)
-       :height (- y2 y1)})))
+         :height (- y2 y1)}))))
 
 (defn blur-filters [type value]
   (->> [value]

frontend/src/app/main/ui/shapes/frame.cljs

@@ -32,11 +32,10 @@
                      #js {:x 0
                           :y 0
                           :width width
-                          :height height}))]
-      [:svg {:x x :y y :width width :height height
-             :xmlnsXlink "http://www.w3.org/1999/xlink"
-             :xmlns "http://www.w3.org/2000/svg"}
-       [:> "rect" props]
+                          :height height
+                          :className "frame-background"}))]
+      [:*
+       [:> :rect props]
        (for [[i item] (d/enumerate childs)]
          [:& shape-wrapper {:frame shape
                             :shape item

frontend/src/app/main/ui/shapes/shape.cljs

@@ -27,14 +27,26 @@
         filter-id (str "filter_" render-id)
         styles    (cond-> (obj/new)
                     (:blocked shape) (obj/set! "pointerEvents" "none"))
+
+        {:keys [x y width height type]} shape
+        frame? (= :frame type)
         group-props (-> (obj/clone props)
                         (obj/without ["shape" "children"])
                         (obj/set! "id" (str "shape-" (:id shape)))
-                        (obj/set! "className" (str "shape " (:type shape)))
                         (obj/set! "filter" (filters/filter-str filter-id shape))
-                        (obj/set! "style" styles))]
+                        (obj/set! "style" styles)
+
+                        (cond-> frame?
+                          (-> (obj/set! "x" x)
+                              (obj/set! "y" y)
+                              (obj/set! "width" width)
+                              (obj/set! "height" height)
+                              (obj/set! "xmlnsXlink" "http://www.w3.org/1999/xlink")
+                              (obj/set! "xmlns" "http://www.w3.org/2000/svg"))))
+
+        wrapper-tag (if frame? "svg" "g")]
     [:& (mf/provider muc/render-ctx) {:value render-id}
-     [:> :g group-props
+     [:> wrapper-tag group-props
       [:defs
        [:& filters/filters {:shape shape :filter-id filter-id}]
        [:& grad/gradient   {:shape shape :attr :fill-color-gradient}]