Merge pull request #2826 from penpot/alotor-thumbnails-performance

Thumbnails performance

frontend/src/app/main/data/workspace/thumbnails.cljs

@@ -28,22 +28,27 @@
        (rx/filter #(= % id))
        (rx/take 1)))
 
-(defn thumbnail-stream
+(defn thumbnail-canvas-blob-stream
   [object-id]
+  ;; Look for the thumbnail canvas to send the data to the backend
+
+  (let [node (dom/query (dm/fmt "canvas.thumbnail-canvas[data-object-id='%'][data-ready='true']" object-id))
+        stopper (->> st/stream
+                     (rx/filter (ptk/type? :app.main.data.workspace/finalize-page))
+                     (rx/take 1))]
+    (if (some? node)
+      ;; Success: we generate the blob (async call)
       (rx/create
        (fn [subs]
-     ;; We look in the DOM a canvas that 1) matches the id and 2) that it's not empty
-     ;; will be empty on first rendering before drawing the thumbnail and we don't want to store that
-     (let [node (dom/query (dm/fmt "canvas.thumbnail-canvas[data-object-id='%'][data-ready='true']" object-id))]
-       (if (some? node)
          (.toBlob node (fn [blob]
                          (rx/push! subs blob)
                          (rx/end! subs))
-                  "image/png")
+                  "image/png")))
 
-         ;; If we cannot find the node we send `nil` and the upsert will delete the thumbnail
+      ;; Not found, we retry after delay
-         (do (rx/push! subs nil)
+      (->> (rx/timer 250)
-             (rx/end! subs)))))))
+           (rx/flat-map #(thumbnail-canvas-blob-stream object-id))
+           (rx/take-until stopper)))))
 
 (defn clear-thumbnail
   [page-id frame-id]
@@ -64,7 +69,7 @@
      (watch [_ state _]
        (let [object-id   (dm/str page-id frame-id)
              file-id     (or file-id (:current-file-id state))
-             blob-result (thumbnail-stream object-id)
+             blob-result (thumbnail-canvas-blob-stream object-id)
              params {:file-id file-id :object-id object-id :data nil}]
 
          (rx/concat
@@ -80,7 +85,7 @@
 
                (rx/merge-map
                 (fn [data]
-                  (if (some? file-id)
+                  (if (and (some? data) (some? file-id))
                     (let [params (assoc params :data data)]
                       (rx/merge
                        ;; Update the local copy of the thumbnails so we don't need to request it again

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

@@ -16,7 +16,6 @@
    [app.main.ui.hooks :as hooks]
    [app.main.ui.shapes.frame :as frame]
    [app.util.dom :as dom]
-   [app.util.object :as obj]
    [app.util.timers :as ts]
    [beicon.core :as rx]
    [cuerdas.core :as str]
@@ -116,28 +115,30 @@
         (mf/use-callback
          (fn generate-thumbnail []
            (try
+             ;; When starting generating the canvas we mark it as not ready so its not send to back until
+             ;; we have time to update it
+             (let [canvas-node (mf/ref-val frame-canvas-ref)]
+               (dom/set-property! canvas-node "data-ready" "false"))
              (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)
+                 (let [style-node (dom/query (dm/str "#frame-container-" (:id shape) " style"))
-                       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
                        viewbox (dm/str x " " y " " width " " height)
 
-                       svg-node
+                       ;; This is way faster than creating a node through the DOM API
-                       (-> (dom/make-node "http://www.w3.org/2000/svg" "svg")
+                       svg-data
-                           (dom/set-property! "version" "1.1")
+                       (dm/fmt "<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" viewBox=\"%\" width=\"%\" height=\"%\" fill=\"none\">% %</svg>"
-                           (dom/set-property! "viewBox" viewbox)
+                               viewbox
-                           (dom/set-property! "width" width)
+                               width
-                           (dom/set-property! "height" height)
+                               height
-                           (dom/set-property! "fill" "none")
+                               (if (some? style-node) (dom/node->xml style-node) "")
-                           (obj/set! "innerHTML" (dm/str style-str frame-html)))
+                               (dom/node->xml node))
 
-                       img-src
+                       blob (js/Blob. #js [svg-data] #js {:type "image/svg+xml;charset=utf-8"})
-                       (-> svg-node dom/node->xml dom/svg->data-uri)]
 
+                       img-src (.createObjectURL js/URL blob)]
                    (reset! image-url img-src))
 
                  ;; Node not yet ready, we schedule a new generation

frontend/src/app/util/dom.cljs

@@ -643,8 +643,10 @@
      :descent (.-fontBoundingBoxDescent measure)}))
 
 (defn clone-node
-  [^js node]
+  ([^js node]
-  (.cloneNode node))
+   (clone-node node true))
+  ([^js node deep?]
+   (.cloneNode node deep?)))
 
 (defn has-children?
   [^js node]