diff --git a/CHANGES.md b/CHANGES.md index ae34729d9..b51985f55 100644 --- a/CHANGES.md +++ b/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 diff --git a/frontend/src/app/main/ui/shapes/filters.cljs b/frontend/src/app/main/ui/shapes/filters.cljs index 72badd7ad..f530dc169 100644 --- a/frontend/src/app/main/ui/shapes/filters.cljs +++ b/frontend/src/app/main/ui/shapes/filters.cljs @@ -124,33 +124,36 @@ (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 width :height height} - ;; 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])} + ;; Otherwise we calculate the bound + (let [filter-bounds (->> filters + (filter #(= :drop-shadow (:type %))) + (map (partial filter-bounds shape) )) + ;; We add the selrect so the minimum size will be the selrect + filter-bounds (conj filter-bounds (:selrect shape)) + x1 (apply min (map :x1 filter-bounds)) + y1 (apply min (map :y1 filter-bounds)) + x2 (apply max (map :x2 filter-bounds)) + y2 (apply max (map :y2 filter-bounds)) - ;; Otherwise we calculate the bound - (let [filter-bounds (->> filters - (filter #(= :drop-shadow (:type %))) - (map (partial filter-bounds shape) )) - ;; We add the selrect so the minimum size will be the selrect - filter-bounds (conj filter-bounds (:selrect shape)) - x1 (apply min (map :x1 filter-bounds)) - y1 (apply min (map :y1 filter-bounds)) - x2 (apply max (map :x2 filter-bounds)) - y2 (apply max (map :y2 filter-bounds)) + x1 (- x1 (* blur-value 2)) + x2 (+ x2 (* blur-value 2)) + y1 (- y1 (* blur-value 2)) + y2 (+ y2 (* blur-value 2))] - x1 (- x1 (* blur-value 2)) - x2 (+ x2 (* blur-value 2)) - y1 (- y1 (* blur-value 2)) - y2 (+ y2 (* blur-value 2))] - - {:x x1 - :y y1 - :width (- x2 x1) - :height (- y2 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)})))) (defn blur-filters [type value] (->> [value] diff --git a/frontend/src/app/main/ui/shapes/frame.cljs b/frontend/src/app/main/ui/shapes/frame.cljs index 55b39bb1b..cf5c0d138 100644 --- a/frontend/src/app/main/ui/shapes/frame.cljs +++ b/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 diff --git a/frontend/src/app/main/ui/shapes/shape.cljs b/frontend/src/app/main/ui/shapes/shape.cljs index 62760374e..08953de39 100644 --- a/frontend/src/app/main/ui/shapes/shape.cljs +++ b/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}]