Merge pull request #2823 from penpot/alotor-polishing-9

Improved thumbnails behavior

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

@@ -114,26 +114,37 @@
 
         generate-thumbnail
         (mf/use-callback
-         (fn []
-           (let [node @node-ref
-                 frame-html (dom/node->xml node)
+         (fn generate-thumbnail []
+           (try
+             (let [node @node-ref]
+               (if (dom/has-children? node)
+                 ;; The frame-content need to have children in order to generate the thumbnail
+                 (let [frame-html (dom/node->xml node)
+                       style-node (dom/query (dm/str "#frame-container-" (:id shape) " style"))
+                       style-str (or (-> style-node dom/node->xml) "")
 
-                 {:keys [x y width height]} @shape-bb-ref
+                       {:keys [x y width height]} @shape-bb-ref
+                       viewbox (dm/str x " " y " " width " " height)
 
-                 style-node (dom/query (dm/str "#frame-container-" (:id shape) " style"))
-                 style-str (or (-> style-node dom/node->xml) "")
+                       svg-node
+                       (-> (dom/make-node "http://www.w3.org/2000/svg" "svg")
+                           (dom/set-property! "version" "1.1")
+                           (dom/set-property! "viewBox" viewbox)
+                           (dom/set-property! "width" width)
+                           (dom/set-property! "height" height)
+                           (dom/set-property! "fill" "none")
+                           (obj/set! "innerHTML" (dm/str style-str frame-html)))
 
-                 svg-node
-                 (-> (dom/make-node "http://www.w3.org/2000/svg" "svg")
-                     (dom/set-property! "version" "1.1")
-                     (dom/set-property! "viewBox" (dm/str x " " y " " width " " height))
-                     (dom/set-property! "width" width)
-                     (dom/set-property! "height" height)
-                     (dom/set-property! "fill" "none")
-                     (obj/set! "innerHTML" (dm/str style-str frame-html)))
-                 img-src  (-> svg-node dom/node->xml dom/svg->data-uri)]
+                       img-src
+                       (-> svg-node dom/node->xml dom/svg->data-uri)]
 
-             (reset! image-url img-src))))
+                   (reset! image-url img-src))
+
+                 ;; Node not yet ready, we schedule a new generation
+                 (ts/schedule generate-thumbnail)))
+
+             (catch :default e
+               (.error js/console e)))))
 
         on-change-frame
         (mf/use-callback

frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs

@@ -248,16 +248,15 @@
     (dissoc :content)))
 
 (defn- is-bool-descendant?
-  [shape all-shapes selected-shape-ids]
+  [[_ shape] objects selected-shape-ids]
+
   (let [parent-id (:parent-id shape)
-        parent (->> all-shapes
-                    (filter #(= (:id %) parent-id))
-                    first)]
+        parent (get objects parent-id)]
     (cond
       (nil? shape) false                                                   ;; failsafe
-      (some #{(:id shape)} selected-shape-ids) false                       ;; if it is one of the selected shapes, it is considerer not a bool descendant
+      (contains? selected-shape-ids (:id shape)) false                     ;; if it is one of the selected shapes, it is considerer not a bool descendant
       (= :bool (:type parent)) true                                        ;; if its parent is of type bool, it is a bool descendant
-      :else (is-bool-descendant? parent all-shapes selected-shape-ids))))  ;; else, check its parent
+      :else (recur [parent-id parent] objects selected-shape-ids))))  ;; else, check its parent
 
 (mf/defc options
   {::mf/wrap [#(mf/memo' % (mf/check-props ["shapes" "shapes-with-children" "page-id" "file-id"]))]
@@ -267,8 +266,13 @@
         shapes-with-children (unchecked-get props "shapes-with-children")
 
         ;; remove children from bool shapes
-        shape-ids (map :id shapes)
-        shapes-with-children (filter #(not (is-bool-descendant? % shapes-with-children shape-ids)) shapes-with-children)
+        shape-ids (into #{} (map :id) shapes)
+
+        objects (->> shapes-with-children (group-by :id) (d/mapm (fn [_ v] (first v))))
+        objects
+        (into {}
+              (filter #(not (is-bool-descendant? % objects shape-ids)))
+              objects)
 
         workspace-modifiers (mf/deref refs/workspace-modifiers)
         shapes (map #(gsh/transform-shape % (get-in workspace-modifiers [(:id %) :modifiers])) shapes)
@@ -276,7 +280,7 @@
         page-id (unchecked-get props "page-id")
         file-id (unchecked-get props "file-id")
         shared-libs (unchecked-get props "shared-libs")
-        objects (->> shapes-with-children (group-by :id) (d/mapm (fn [_ v] (first v))))
+
         show-caps (some #(and (= :path (:type %)) (gsh/open-path? %)) shapes)
 
         ;; Selrect/points only used for measures and it's the one that changes the most. We separate it

frontend/src/app/util/dom.cljs

@@ -264,12 +264,14 @@
 (defn append-child!
   [^js el child]
   (when (some? el)
-    (.appendChild ^js el child)))
+    (.appendChild ^js el child))
+  el)
 
 (defn remove-child!
   [^js el child]
   (when (some? el)
-    (.removeChild ^js el child)))
+    (.removeChild ^js el child))
+  el)
 
 (defn get-first-child
   [^js el]
@@ -639,3 +641,11 @@
 
     {:ascent (.-fontBoundingBoxAscent measure)
      :descent (.-fontBoundingBoxDescent measure)}))
+
+(defn clone-node
+  [^js node]
+  (.cloneNode node))
+
+(defn has-children?
+  [^js node]
+  (> (-> node .-children .-length) 0))

frontend/src/debug.cljs

@@ -131,9 +131,7 @@
 
 (defn ^:export ^boolean debug?
   [option]
-  (if *assert*
-    (boolean (@*debug* option))
-    false))
+  (boolean (@*debug* option)))
 
 (defn ^:export toggle-debug [name] (let [option (keyword name)]
                                      (if (debug? option)