✨ Fix shadows and thumbnails

backend/src/app/rpc/queries/files.clj

@@ -315,7 +315,7 @@
 
                       bounds
                       (when (:show-content frame)
-                        (gsh/selection-rect (->> children-ids (map (d/getf objects)))))
+                        (gsh/selection-rect (concat [frame] (->> children-ids (map (d/getf objects))))))
 
                       frame
                       (cond-> frame

common/src/app/common/pages/helpers.cljc

@@ -52,6 +52,10 @@
   [{:keys [type]}]
   (= type :image))
 
+(defn svg-raw-shape?
+  [{:keys [type]}]
+  (= type :svg-raw))
+
 (defn unframed-shape?
   "Checks if it's a non-frame shape in the top level."
   [shape]

frontend/src/app/main/render.cljs

@@ -203,12 +203,17 @@
                     (update :width + (* 2 (:horizontal padding)))
                     (update :height + (* 2 (:vertical padding))))]
 
-    (if (cph/group-shape? object)
+    (cond
-      (if (:masked-group? object)
+      (and (cph/group-shape? object) (:masked-group? object))
       (get-object-bounds objects (-> object :shapes first))
+
+      (or (cph/group-shape? object)
+          (and (cph/frame-shape? object) (:show-content object)))
       (->> (:shapes object)
            (into [bounds] (map (partial get-object-bounds objects)))
-             (gsh/join-rects)))
+           (gsh/join-rects))
+
+      :else
       bounds)))
 
 (mf/defc page-svg

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

@@ -7,6 +7,7 @@
 (ns app.main.ui.shapes.shape
   (:require
    [app.common.data :as d]
+   [app.common.pages.helpers :as cph]
    [app.common.data.macros :as dm]
    [app.common.uuid :as uuid]
    [app.main.ui.context :as muc]
@@ -51,6 +52,7 @@
   (let [shape            (obj/get props "shape")
         children         (obj/get props "children")
         pointer-events   (obj/get props "pointer-events")
+        disable-shadows? (obj/get props "disable-shadows?")
 
         type           (:type shape)
         render-id      (mf/use-memo #(str (uuid/next)))
@@ -72,15 +74,16 @@
             (obj/set! "id" (dm/fmt "shape-%" (:id shape)))
             (obj/set! "style" styles))
 
-        wrapper-props
-        (cond-> wrapper-props
-          (some #(= (:type shape) %) [:group :svg-raw :frame])
-          (obj/set! "filter" (filters/filter-str filter-id shape)))
-
         wrapper-props
         (cond-> wrapper-props
           (= :group type)
-          (attrs/add-style-attrs shape render-id))
+          (attrs/add-style-attrs shape render-id)
+
+          (and (or (cph/group-shape? shape)
+                   (cph/frame-shape? shape)
+                   (cph/svg-raw-shape? shape))
+               (not disable-shadows?))
+          (obj/set! "filter" (filters/filter-str filter-id shape)))
 
         svg-group? (and (contains? shape :svg-attrs) (= :group type))
 

frontend/src/app/main/ui/viewer.cljs

@@ -86,7 +86,7 @@
 
 (mf/defc viewer-wrapper
   [{:keys [wrapper-size scroll orig-frame orig-viewport-ref orig-size page file users current-viewport-ref
-           size frame interactions-mode overlays zoom close-overlay section index] :as props}]
+           size frame interactions-mode overlays zoom close-overlay section index children-bounds] :as props}]
   (let [{clist :list} (mf/deref refs/comments-local)
         show-comments-list (and (= section :comments) (= :show clist))]
     [:*
@@ -173,8 +173,6 @@
                               :page page
                               :zoom zoom}])]]]]))
 
-
-
 (mf/defc viewer
   [{:keys [params data]}]
 
@@ -407,7 +405,7 @@
              :file file
              :section section
              :local local
-             :size size}
+             :size size
              :index index
              :viewer-pagination viewer-pagination}]
 
@@ -428,7 +426,8 @@
               :overlays overlays
               :zoom zoom
               :section section
-              :index index}]))]]]))
+              :index index
+              :children-bounds children-bounds}]))]]]))
 
 ;; --- Component: Viewer Page
 

frontend/src/app/main/ui/viewer/comments.cljs

@@ -164,7 +164,6 @@
                                :on-submit on-draft-submit
                                :zoom zoom}])]]]))
 
-
 (mf/defc comments-sidebar
   [{:keys [users frame page]}]
   (let [profile     (mf/deref refs/profile)
@@ -173,7 +172,7 @@
         threads     (->> (vals threads-map)
                          (dcm/apply-filters cstate profile)
                          (filter (fn [{:keys [position]}]
-                                   (frame-contains? frame position))))]
+                                   (gsh/has-point? frame position))))]
     [:aside.settings-bar.settings-bar-right.comments-right-sidebar
      [:div.settings-bar-inside
       [:& wc/comments-sidebar {:users users :threads threads :page-id (:id page)}]]]))

frontend/src/app/main/ui/viewer/thumbnails.cljs

@@ -6,6 +6,8 @@
 
 (ns app.main.ui.viewer.thumbnails
   (:require
+   [app.common.pages.helpers :as cph]
+   [app.common.geom.shapes :as gsh]
    [app.common.data :as d]
    [app.common.data.macros :as dm]
    [app.main.data.viewer :as dv]
@@ -76,12 +78,14 @@
   {::mf/wrap [mf/memo
               #(mf/deferred % ts/idle-then-raf)]}
   [{:keys [selected? frame on-click index objects]}]
+  (let [children-ids (cph/get-children-ids objects (:id frame))
+        children-bounds (gsh/selection-rect (concat [frame] (->> children-ids (keep (d/getf objects)))))]
     [:div.thumbnail-item {:on-click #(on-click % index)}
      [:div.thumbnail-preview
       {:class (dom/classnames :selected selected?)}
-    [:& render/frame-svg {:frame frame :objects objects :show-thumbnails? true}]]
+      [:& render/frame-svg {:frame (assoc frame :children-bounds children-bounds) :objects objects :show-thumbnails? true}]]
      [:div.thumbnail-info
-    [:span.name {:title (:name frame)} (:name frame)]]])
+      [:span.name {:title (:name frame)} (:name frame)]]]))
 
 (mf/defc thumbnails-panel
   [{:keys [frames page index show?] :as props}]

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

@@ -40,7 +40,7 @@
             childs        (mf/deref childs-ref)]
 
         [:& (mf/provider embed/context) {:value true}
-         [:& shape-container {:shape shape :ref ref}
+         [:& shape-container {:shape shape :ref ref :disable-shadows? true}
           [:& frame-shape {:shape shape :childs childs} ]]]))))
 
 (defn check-props
@@ -125,7 +125,7 @@
                   @node-ref)
                  (when (not @rendered?) (reset! rendered? true)))))
 
-            [:*
+            [:& shape-container {:shape shape}
              [:g.frame-container {:id (dm/str "frame-container-" (:id shape))
                                   :key "frame-container"
                                   :ref on-frame-load
@@ -135,5 +135,4 @@
                {:id (dm/str "thumbnail-container-" (:id shape))
                 ;; Hide the thumbnail when not displaying
                 :opacity (when (and @rendered? (not thumbnail?) (not render-frame?)) 0)}
-               [:& shape-container {:shape shape}
+               thumbnail-renderer]]]))))))
-                thumbnail-renderer]]]]))))))

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

@@ -68,7 +68,7 @@
 
         {:keys [x y width height] :as shape-bb}
         (if (:show-content shape)
-          (gsh/selection-rect all-children)
+          (gsh/selection-rect (concat [shape] all-children))
           (-> shape :points gsh/points->selrect))
 
         fixed-width (mth/clamp width 250 2000)