diff --git a/CHANGES.md b/CHANGES.md index 1e2d8f0f3..e6c61e8b2 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -22,6 +22,7 @@ - Allow three character hex and web colors in color picker hex input [#1184](https://github.com/penpot/penpot/issues/1184) - Allow lowercase search for fonts [#1180](https://github.com/penpot/penpot/issues/1180) - Fix group renaming problem [Taiga #1969](https://tree.taiga.io/project/penpot/issue/1969) +- Fix export group with shadows on children [Taiga #2036](https://tree.taiga.io/project/penpot/issue/2036) ### :arrow_up: Deps updates ### :boom: Breaking changes diff --git a/common/src/app/common/geom/shapes.cljc b/common/src/app/common/geom/shapes.cljc index 43b069eb3..30b3cb357 100644 --- a/common/src/app/common/geom/shapes.cljc +++ b/common/src/app/common/geom/shapes.cljc @@ -141,6 +141,7 @@ (d/export gpr/points->selrect) (d/export gpr/points->rect) (d/export gpr/center->rect) +(d/export gpr/join-rects) (d/export gtr/move) (d/export gtr/absolute-move) diff --git a/common/src/app/common/geom/shapes/rect.cljc b/common/src/app/common/geom/shapes/rect.cljc index f4a0bd043..047781a70 100644 --- a/common/src/app/common/geom/shapes/rect.cljc +++ b/common/src/app/common/geom/shapes/rect.cljc @@ -48,6 +48,16 @@ (defn rect->selrect [rect] (-> rect rect->points points->selrect)) +(defn join-rects [rects] + (let [minx (transduce (comp (map :x) (remove nil?)) min ##Inf rects) + miny (transduce (comp (map :y) (remove nil?)) min ##Inf rects) + maxx (transduce (comp (map #(+ (:x %) (:width %))) (remove nil?)) max ##-Inf rects) + maxy (transduce (comp (map #(+ (:y %) (:height %))) (remove nil?)) max ##-Inf rects)] + {:x minx + :y miny + :width (- maxx minx) + :height (- maxy miny)})) + (defn join-selrects [selrects] (let [minx (transduce (comp (map :x1) (remove nil?)) min ##Inf selrects) miny (transduce (comp (map :y1) (remove nil?)) min ##Inf selrects) diff --git a/frontend/src/app/main/ui/render.cljs b/frontend/src/app/main/ui/render.cljs index cdb843181..9e550db3e 100644 --- a/frontend/src/app/main/ui/render.cljs +++ b/frontend/src/app/main/ui/render.cljs @@ -25,6 +25,23 @@ [cuerdas.core :as str] [rumext.alpha :as mf])) +(defn bounds + [object objects] + (if (= :group (:type object)) + (let [children-bounds + (into [] + (comp (map #(get objects %)) + (map #(bounds % objects))) + (:shapes object))] + (gsh/join-rects children-bounds)) + + (let [padding (filters/calculate-padding object)] + (-> (filters/get-filters-bounds object) + (update :x - padding) + (update :y - padding) + (update :width + (* 2 padding)) + (update :height + (* 2 padding)))))) + (mf/defc object-svg {::mf/wrap [mf/memo]} [{:keys [objects object-id zoom render-texts?] :or {zoom 1} :as props}] @@ -47,20 +64,10 @@ objects (reduce updt-fn objects mod-ids) object (get objects object-id) - ;; We need to get the shadows/blurs paddings to create the viewbox properly - {:keys [x y width height]} (filters/get-filters-bounds object) + {:keys [x y width height] :as bs} (bounds object objects) + [_ _ width height :as coords] (->> [x y width height] (map #(* % zoom))) - x (* x zoom) - y (* y zoom) - width (* width zoom) - height (* height zoom) - - padding (* (filters/calculate-padding object) zoom) - - vbox (str/join " " [(- x padding) - (- y padding) - (+ width padding padding) - (+ height padding padding)]) + vbox (str/join " " coords) frame-wrapper (mf/use-memo @@ -84,14 +91,14 @@ (mf/use-effect (mf/deps width height) - #(dom/set-page-style {:size (str (mth/ceil (+ width padding padding)) "px " - (mth/ceil (+ height padding padding)) "px")})) + #(dom/set-page-style {:size (str (mth/ceil width) "px " + (mth/ceil height) "px")})) [:& (mf/provider embed/context) {:value true} [:svg {:id "screenshot" :view-box vbox - :width (+ width padding padding) - :height (+ height padding padding) + :width width + :height height :version "1.1" :xmlns "http://www.w3.org/2000/svg" :xmlnsXlink "http://www.w3.org/1999/xlink"