Merge pull request #4295 from penpot/azazeln28-fix-dashboard-thumbnails-with-strokes

🐛 Fix dashboard thumbnails with strokes

common/src/app/common/geom/shapes/bounds.cljc

@@ -190,3 +190,8 @@
 
      (get-rect-filter-bounds children-bounds filters blur-value))))
 
+(defn get-frame-bounds
+  ([shape]
+   (get-frame-bounds shape nil))
+  ([shape {:keys [ignore-margin?] :or {ignore-margin? false}}]
+   (get-object-bounds [] shape {:ignore-margin? ignore-margin?})))

frontend/src/app/main/render.cljs

@@ -28,7 +28,9 @@
    [app.common.types.shape-tree :as ctst]
    [app.common.types.shape.layout :as ctl]
    [app.config :as cfg]
+   [app.main.features :as features]
    [app.main.fonts :as fonts]
+   [app.main.store :as st]
    [app.main.ui.context :as muc]
    [app.main.ui.shapes.bool :as bool]
    [app.main.ui.shapes.circle :as circle]
@@ -44,6 +46,7 @@
    [app.main.ui.shapes.svg-raw :as svg-raw]
    [app.main.ui.shapes.text :as text]
    [app.main.ui.shapes.text.fontfaces :as ff]
+   [app.main.worker :as wrk]
    [app.util.dom :as dom]
    [app.util.http :as http]
    [app.util.strings :as ust]
@@ -668,3 +671,16 @@
      (do
        (l/warn :msg "imposter shape is nil")
        (rx/empty)))))
+
+(defn render-thumbnail
+  [file-id revn]
+  (->> (wrk/ask! {:cmd :thumbnails/generate-for-file
+                  :revn revn
+                  :file-id file-id
+                  :features (features/get-team-enabled-features @st/state)})
+       (rx/mapcat (fn [{:keys [fonts] :as result}]
+                    (->> (fonts/render-font-styles fonts)
+                         (rx/map (fn [styles]
+                                   (assoc result
+                                          :styles styles
+                                          :width 252))))))))

frontend/src/app/main/ui/dashboard/grid.cljs

@@ -13,11 +13,10 @@
    [app.common.logging :as log]
    [app.main.data.dashboard :as dd]
    [app.main.data.messages :as msg]
-   [app.main.features :as features]
    [app.main.fonts :as fonts]
    [app.main.rasterizer :as thr]
    [app.main.refs :as refs]
-   [app.main.render :refer [component-svg]]
+   [app.main.render :as render]
    [app.main.repo :as rp]
    [app.main.store :as st]
    [app.main.ui.components.color-bullet :as bc]
@@ -27,7 +26,6 @@
    [app.main.ui.dashboard.placeholder :refer [empty-placeholder loading-placeholder]]
    [app.main.ui.hooks :as h]
    [app.main.ui.icons :as i]
-   [app.main.worker :as wrk]
    [app.util.color :as uc]
    [app.util.dom :as dom]
    [app.util.dom.dnd :as dnd]
@@ -52,16 +50,7 @@
 (defn- ask-for-thumbnail
   "Creates some hooks to handle the files thumbnails cache"
   [file-id revn]
-  (->> (wrk/ask! {:cmd :thumbnails/generate-for-file
-                  :revn revn
-                  :file-id file-id
-                  :features (features/get-team-enabled-features @st/state)})
-       (rx/mapcat (fn [{:keys [fonts] :as result}]
-                    (->> (fonts/render-font-styles fonts)
-                         (rx/map (fn [styles]
-                                   (assoc result
-                                          :styles styles
-                                          :width 252))))))
+  (->> (render/render-thumbnail file-id revn)
        (rx/mapcat thr/render)
        (rx/mapcat (partial persist-thumbnail file-id revn))))
 
@@ -141,8 +130,8 @@
               (let [root-id (or (:main-instance-id component) (:id component))] ;; Check for components-v2 in library
                 [:div {:class (stl/css :asset-list-item)
                        :key (str "assets-component-" (:id component))}
-                 [:& component-svg {:root-shape (get-in component [:objects root-id])
-                                    :objects (:objects component)}] ;; Components in the summary come loaded with objects, even in v2
+                 [:& render/component-svg {:root-shape (get-in component [:objects root-id])
+                                           :objects (:objects component)}] ;; Components in the summary come loaded with objects, even in v2
                  [:div {:class (stl/css :name-block)}
                   [:span {:class (stl/css :item-name)
                           :title (:name component)}

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

@@ -8,8 +8,8 @@
   (:require
    [app.common.data.macros :as dm]
    [app.common.files.helpers :as cfh]
-   [app.common.geom.rect :as grc]
    [app.common.geom.shapes :as gsh]
+   [app.common.geom.shapes.bounds :as gsb]
    [app.common.types.shape.layout :as ctl]
    [app.config :as cf]
    [app.main.ui.context :as muc]
@@ -119,7 +119,7 @@
         points   (dm/get-prop shape :points)
 
         bounds   (mf/with-memo [bounds points]
-                   (or bounds (grc/points->rect points)))
+                   (or bounds (gsb/get-frame-bounds shape)))
 
         thumb    (:thumbnail shape)