♻️ Refactor thumbnail rendering on workspace

backend/src/app/rpc/commands/files_thumbnails.clj

@@ -48,8 +48,9 @@
    (let [sql (str/concat
               "select object_id, data, media_id "
               "  from file_object_thumbnail"
-              " where file_id=?")]
+              " where file_id=?")
-     (->> (db/exec! conn [sql file-id])
+         res (db/exec! conn [sql file-id])]
+     (->> res
           (d/index-by :object-id (fn [row]
                                    (or (some-> row :media-id get-public-uri)
                                        (:data row))))
@@ -57,14 +58,16 @@
 
   ([conn file-id object-ids]
    (let [sql (str/concat
-              "select object_id, data "
+              "select object_id, data, media_id "
               "  from file_object_thumbnail"
               " where file_id=? and object_id = ANY(?)")
-         ids (db/create-array conn "text" (seq object-ids))]
+         ids (db/create-array conn "text" (seq object-ids))
-     (->> (db/exec! conn [sql file-id ids])
+         res (db/exec! conn [sql file-id ids])]
-          (d/index-by :object-id (fn [row]
+     (d/index-by :object-id
+                 (fn [row]
                    (or (some-> row :media-id get-public-uri)
-                                       (:data row))))))))
+                       (:data row)))
+                 res))))
 
 (sv/defmethod ::get-file-object-thumbnails
   "Retrieve a file object thumbnails."
@@ -248,33 +251,52 @@
 
 ;; --- MUTATION COMMAND: upsert-file-object-thumbnail
 
-(def sql:upsert-object-thumbnail-1
+(def sql:upsert-object-thumbnail
   "insert into file_object_thumbnail(file_id, object_id, data)
    values (?, ?, ?)
        on conflict(file_id, object_id) do
           update set data = ?;")
 
-(def sql:upsert-object-thumbnail-2
+(defn upsert-file-object-thumbnail!
+  [conn {:keys [file-id object-id data]}]
+  (if data
+    (db/exec-one! conn [sql:upsert-object-thumbnail file-id object-id data data])
+    (db/delete! conn :file-object-thumbnail {:file-id file-id :object-id object-id})))
+
+(s/def ::data (s/nilable ::us/string))
+(s/def ::object-id ::us/string)
+
+(s/def ::upsert-file-object-thumbnail
+  (s/keys :req [::rpc/profile-id]
+          :req-un [::file-id ::object-id]
+          :opt-un [::data]))
+
+(sv/defmethod ::upsert-file-object-thumbnail
+  {::doc/added "1.17"
+   ::doc/deprecated "1.19"
+   ::audit/skip true}
+  [{:keys [::db/pool] :as cfg} {:keys [::rpc/profile-id file-id] :as params}]
+  (db/with-atomic [conn pool]
+    (files/check-edition-permissions! conn profile-id file-id)
+
+    (when-not (db/read-only? conn)
+      (upsert-file-object-thumbnail! conn params)
+      nil)))
+
+
+;; --- MUTATION COMMAND: create-file-object-thumbnail
+
+(def ^:private sql:create-object-thumbnail
   "insert into file_object_thumbnail(file_id, object_id, media_id)
    values (?, ?, ?)
        on conflict(file_id, object_id) do
           update set media_id = ?;")
 
-(defn upsert-file-object-thumbnail!
+(defn- create-file-object-thumbnail!
-  [{:keys [::db/conn ::sto/storage]} {:keys [file-id object-id] :as params}]
+  [{:keys [::db/conn ::sto/storage]} file-id object-id media]
 
-  ;; NOTE: params can come with data set but with `nil` value, so we
+  (let [path  (:path media)
-  ;; need first check the existence of the key and then the value.
+        mtype (:mtype media)
-  (cond
-    (contains? params :data)
-    (if-let [data (:data params)]
-      (db/exec-one! conn [sql:upsert-object-thumbnail-1 file-id object-id data data])
-      (db/delete! conn :file-object-thumbnail {:file-id file-id :object-id object-id}))
-
-    (contains? params :media)
-    (if-let [{:keys [path mtype] :as media} (:media params)]
-      (let [_     (media/validate-media-type! media)
-            _     (media/validate-media-size! media)
         hash  (sto/calculate-hash path)
         data  (-> (sto/content path)
                   (sto/wrap-with-hash hash))
@@ -284,58 +306,117 @@
                                 :content-type mtype
                                 :bucket "file-object-thumbnail"})]
 
-        (db/exec-one! conn [sql:upsert-object-thumbnail-2 file-id object-id (:id media) (:id media)]))
+    (db/exec-one! conn [sql:create-object-thumbnail file-id object-id
-      (db/delete! conn :file-object-thumbnail {:file-id file-id :object-id object-id}))))
+                        (:id media) (:id media)])))
+
 
-;; FIXME: change it on validation refactor
-(s/def ::data (s/nilable ::us/string))
 (s/def ::media (s/nilable ::media/upload))
-(s/def ::object-id ::us/string)
+(s/def ::create-file-object-thumbnail
-
-(s/def ::upsert-file-object-thumbnail
   (s/keys :req [::rpc/profile-id]
-          :req-un [::file-id ::object-id]
+          :req-un [::file-id ::object-id ::media]))
-          :opt-un [::data ::media]))
 
-(sv/defmethod ::upsert-file-object-thumbnail
+(sv/defmethod ::create-file-object-thumbnail
-  {::doc/added "1.17"
+  {:doc/added "1.19"
    ::audit/skip true}
-  [{:keys [::db/pool] :as cfg} {:keys [::rpc/profile-id file-id] :as params}]
+  [{:keys [::db/pool] :as cfg} {:keys [::rpc/profile-id file-id object-id media]}]
+  (db/with-atomic [conn pool]
+    (files/check-edition-permissions! conn profile-id file-id)
+    (media/validate-media-type! media)
+    (media/validate-media-size! media)
 
-  (assert (or (contains? params :data)
+    (when-not (db/read-only? conn)
-              (contains? params :media)))
+      (-> cfg
+          (update ::sto/storage media/configure-assets-storage)
+          (assoc ::db/conn conn)
+          (create-file-object-thumbnail! file-id object-id media))
+      nil)))
+
+;; --- MUTATION COMMAND: delete-file-object-thumbnail
+
+(defn- delete-file-object-thumbnail!
+  [{:keys [::db/conn ::sto/storage]} file-id object-id]
+  (when-let [{:keys [media-id]} (db/get* conn :file-object-thumbnail
+                                         {:file-id file-id
+                                          :object-id object-id}
+                                         {::db/for-update? true})]
+    (when media-id
+      (sto/del-object! storage media-id))
+
+    (db/delete! conn :file-object-thumbnail
+                {:file-id file-id
+                 :object-id object-id})
+    nil))
+
+(s/def ::delete-file-object-thumbnail
+  (s/keys :req [::rpc/profile-id]
+          :req-un [::file-id ::object-id]))
+
+(sv/defmethod ::delete-file-object-thumbnail
+  {:doc/added "1.19"
+   ::audit/skip true}
+  [{:keys [::db/pool] :as cfg} {:keys [::rpc/profile-id file-id object-id]}]
 
   (db/with-atomic [conn pool]
     (files/check-edition-permissions! conn profile-id file-id)
 
     (when-not (db/read-only? conn)
-      (let [cfg (-> cfg
+      (-> cfg
           (update ::sto/storage media/configure-assets-storage)
-                    (assoc ::db/conn conn))]
+          (assoc ::db/conn conn)
-        (upsert-file-object-thumbnail! cfg params)
+          (delete-file-object-thumbnail! file-id object-id))
-        nil))))
+      nil)))
 
 ;; --- MUTATION COMMAND: upsert-file-thumbnail
 
 (def ^:private sql:upsert-file-thumbnail
-  "insert into file_thumbnail (file_id, revn, data, media_id, props)
+  "insert into file_thumbnail (file_id, revn, data, props)
-   values (?, ?, ?, ?, ?::jsonb)
+   values (?, ?, ?, ?::jsonb)
        on conflict(file_id, revn) do
-          update set data=?, media_id=?, props=?, updated_at=now();")
+          update set data = ?, props=?, updated_at=now();")
 
 (defn- upsert-file-thumbnail!
-  [{:keys [::db/conn ::sto/storage]} {:keys [file-id revn props] :as params}]
+  [conn {:keys [file-id revn data props]}]
   (let [props (db/tjson (or props {}))]
-    (cond
-      (contains? params :data)
-      (when-let [data (:data params)]
     (db/exec-one! conn [sql:upsert-file-thumbnail
-                            file-id revn data nil props data nil props]))
+                        file-id revn data props data props])))
 
-      (contains? params :media)
+
-      (when-let [{:keys [path mtype] :as media} (:media params)]
+(s/def ::revn ::us/integer)
-        (let [_     (media/validate-media-type! media)
+(s/def ::props map?)
-              _     (media/validate-media-size! media)
+
+(s/def ::upsert-file-thumbnail
+  (s/keys :req [::rpc/profile-id]
+          :req-un [::file-id ::revn ::props ::data]))
+
+(sv/defmethod ::upsert-file-thumbnail
+  "Creates or updates the file thumbnail. Mainly used for paint the
+  grid thumbnails."
+  {::doc/added "1.17"
+   ::doc/deprecated "1.19"
+   ::audit/skip true}
+  [{:keys [::db/pool] :as cfg} {:keys [::rpc/profile-id file-id] :as params}]
+  (db/with-atomic [conn pool]
+    (files/check-edition-permissions! conn profile-id file-id)
+    (when-not (db/read-only? conn)
+      (upsert-file-thumbnail! conn params)
+      nil)))
+
+;; --- MUTATION COMMAND: create-file-thumbnail
+
+(def ^:private sql:create-file-thumbnail
+  "insert into file_thumbnail (file_id, revn, media_id, props)
+   values (?, ?, ?, ?::jsonb)
+       on conflict(file_id, revn) do
+          update set media_id=?, props=?, updated_at=now();")
+
+(defn- create-file-thumbnail!
+  [{:keys [::db/conn ::sto/storage]} {:keys [file-id revn props media] :as params}]
+  (media/validate-media-type! media)
+  (media/validate-media-size! media)
+
+  (let [props (db/tjson (or props {}))
+        path  (:path media)
+        mtype (:mtype media)
         hash  (sto/calculate-hash path)
         data  (-> (sto/content path)
                   (sto/wrap-with-hash hash))
@@ -344,29 +425,26 @@
                                 ::sto/deduplicate? false
                                 :content-type mtype
                                 :bucket "file-thumbnail"})]
-          (db/exec-one! conn [sql:upsert-file-thumbnail
+    (db/exec-one! conn [sql:create-file-thumbnail file-id revn
-                              file-id revn nil (:id media) props nil (:id media) props]))))))
+                        (:id media) props
+                        (:id media) props])))
 
-(s/def ::revn ::us/integer)
-(s/def ::props map?)
 (s/def ::media ::media/upload)
-
+(s/def ::create-file-thumbnail
-(s/def ::upsert-file-thumbnail
   (s/keys :req [::rpc/profile-id]
-          :req-un [::file-id ::revn ::props]
+          :req-un [::file-id ::revn ::props ::media]))
-          :opt-un [::data ::media]))
 
-(sv/defmethod ::upsert-file-thumbnail
+(sv/defmethod ::create-file-thumbnail
   "Creates or updates the file thumbnail. Mainly used for paint the
   grid thumbnails."
-  {::doc/added "1.17"
+  {::doc/added "1.19"
    ::audit/skip true}
   [{:keys [::db/pool] :as cfg} {:keys [::rpc/profile-id file-id] :as params}]
   (db/with-atomic [conn pool]
     (files/check-edition-permissions! conn profile-id file-id)
     (when-not (db/read-only? conn)
-      (let [cfg (-> cfg
+      (-> cfg
           (update ::sto/storage media/configure-assets-storage)
-                    (assoc ::db/conn conn))]
+          (assoc ::db/conn conn)
-        (upsert-file-thumbnail! cfg params))
+          (create-file-thumbnail! params))
       nil)))

backend/test/backend_tests/rpc_file_thumbnails_test.clj

@@ -52,7 +52,7 @@
                          :parent-id uuid/zero
                          :type :frame}}])
 
-        data1   {::th/type :upsert-file-object-thumbnail
+        data1   {::th/type :create-file-object-thumbnail
                  ::rpc/profile-id (:id profile)
                  :file-id (:id file)
                  :object-id "test-key-1"
@@ -61,7 +61,7 @@
                          :path (th/tempfile "backend_tests/test_files/sample.jpg")
                          :mtype "image/jpeg"}}
 
-        data2   {::th/type :upsert-file-object-thumbnail
+        data2   {::th/type :create-file-object-thumbnail
                  ::rpc/profile-id (:id profile)
                  :file-id (:id file)
                  :object-id (str page-id shid)
@@ -156,7 +156,7 @@
                  :revn 1
                  :data "data:base64,1234123124"}
 
-        data2   {::th/type :upsert-file-thumbnail
+        data2   {::th/type :create-file-thumbnail
                  ::rpc/profile-id (:id profile)
                  :file-id (:id file)
                  :props {}
@@ -166,7 +166,7 @@
                          :path (th/tempfile "backend_tests/test_files/sample2.jpg")
                          :mtype "image/jpeg"}}
 
-        data3   {::th/type :upsert-file-thumbnail
+        data3   {::th/type :create-file-thumbnail
                  ::rpc/profile-id (:id profile)
                  :file-id (:id file)
                  :props {}
@@ -177,11 +177,11 @@
                          :mtype "image/jpeg"}}]
 
     (let [out (th/command! data1)]
-      ;; (th/print-result! out)
       (t/is (nil? (:error out)))
       (t/is (nil? (:result out))))
 
     (let [out (th/command! data2)]
+      ;; (th/print-result! out)
       (t/is (nil? (:error out)))
       (t/is (nil? (:result out))))
 
@@ -251,10 +251,10 @@
       (let [row (th/db-get :storage-object {:id (:media-id row1)} {::db/remove-deleted? false})]
         (t/is (nil? row)))
 
-      (t/is (some? (sto/get-object storage (:media-id row3))))
+      (t/is (some? (sto/get-object storage (:media-id row3)))))
 
 
-      )))
+    ))
 
 (t/deftest get-file-object-thumbnail
   (let [storage (::sto/storage th/*system*)
@@ -269,7 +269,7 @@
                  :object-id "test-key-1"
                  :data "data:base64,1234123124"}
 
-        data2   {::th/type :upsert-file-object-thumbnail
+        data2   {::th/type :create-file-object-thumbnail
                  ::rpc/profile-id (:id profile)
                  :file-id (:id file)
                  :object-id "test-key-2"

frontend/src/app/main/data/dashboard.cljs

@@ -137,7 +137,7 @@
     ptk/WatchEvent
     (watch [_ state _]
       (let [team-id (:current-team-id state)]
-        (->> (rp/command! :get-webhooks {:team-id team-id})
+        (->> (rp/cmd! :get-webhooks {:team-id team-id})
              (rx/map team-webhooks-fetched))))))
 
 ;; --- EVENT: fetch-projects
@@ -302,7 +302,7 @@
   (ptk/reify ::fetch-builtin-templates
     ptk/WatchEvent
     (watch [_ _ _]
-        (->> (rp/command :retrieve-list-of-builtin-templates)
+        (->> (rp/cmd! :retrieve-list-of-builtin-templates)
              (rx/map builtin-templates-fetched)))))
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
@@ -555,7 +555,7 @@
             {:keys [on-success on-error]
              :or {on-success identity
                   on-error rx/throw}} (meta params)]
-        (->> (rp/command! :delete-webhook params)
+        (->> (rp/cmd! :delete-webhook params)
              (rx/tap on-success)
              (rx/catch on-error))))))
 
@@ -578,7 +578,7 @@
             {:keys [on-success on-error]
              :or {on-success identity
                   on-error rx/throw}} (meta params)]
-        (->> (rp/command! :update-webhook params)
+        (->> (rp/cmd! :update-webhook params)
              (rx/tap on-success)
              (rx/catch on-error))))))
 
@@ -598,7 +598,7 @@
             {:keys [on-success on-error]
              :or {on-success identity
                   on-error rx/throw}} (meta params)]
-        (->> (rp/command! :create-webhook params)
+        (->> (rp/cmd! :create-webhook params)
              (rx/tap on-success)
              (rx/catch on-error))))))
 

frontend/src/app/main/data/exports.cljs

@@ -145,7 +145,7 @@
     ptk/WatchEvent
     (watch [_ _ _]
       (when (= status "ended")
-        (->> (rp/command! :export {:cmd :get-resource :blob? true :id resource-id})
+        (->> (rp/cmd! :export {:cmd :get-resource :blob? true :id resource-id})
              (rx/delay 500)
              (rx/map #(dom/trigger-download filename %)))))))
 
@@ -165,9 +165,9 @@
                         :wait true}]
         (rx/concat
          (rx/of ::dwp/force-persist)
-         (->> (rp/command! :export params)
+         (->> (rp/cmd! :export params)
               (rx/mapcat (fn [{:keys [id filename]}]
-                           (->> (rp/command! :export {:cmd :get-resource :blob? true :id id})
+                           (->> (rp/cmd! :export {:cmd :get-resource :blob? true :id id})
                                 (rx/map (fn [data]
                                           (dom/trigger-download filename data)
                                           (clear-export-state uuid/zero))))))
@@ -213,7 +213,7 @@
 
          ;; Launch the exportation process and stores the resource id
          ;; locally.
-         (->> (rp/command! :export params)
+         (->> (rp/cmd! :export params)
               (rx/map (fn [{:keys [id] :as resource}]
                         (vreset! resource-id id)
                         (initialize-export-status exports cmd resource))))

frontend/src/app/main/data/users.cljs

@@ -535,7 +535,7 @@
   (ptk/reify ::fetch-access-tokens
     ptk/WatchEvent
     (watch [_ _ _]
-      (->> (rp/command! :get-access-tokens)
+      (->> (rp/cmd! :get-access-tokens)
            (rx/map access-tokens-fetched)))))
 
 ;; --- EVENT: create-access-token
@@ -555,7 +555,7 @@
       (let [{:keys [on-success on-error]
              :or {on-success identity
                   on-error rx/throw}} (meta params)]
-        (->> (rp/command! :create-access-token params)
+        (->> (rp/cmd! :create-access-token params)
              (rx/map access-token-created)
              (rx/tap on-success)
              (rx/catch on-error))))))
@@ -571,6 +571,6 @@
       (let [{:keys [on-success on-error]
              :or {on-success identity
                   on-error rx/throw}} (meta params)]
-        (->> (rp/command! :delete-access-token params)
+        (->> (rp/cmd! :delete-access-token params)
              (rx/tap on-success)
              (rx/catch on-error))))))

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

@@ -267,6 +267,29 @@
         (when needs-update?
           (rx/of (dwl/notify-sync-file file-id)))))))
 
+(defn- fetch-thumbnail-blob-uri
+  [uri]
+  (->> (http/send! {:uri uri
+                    :response-type :blob
+                    :method :get})
+       (rx/map :body)
+       (rx/map (fn [blob] (.createObjectURL js/URL blob)))))
+
+(defn- fetch-thumbnail-blobs
+  [file-id]
+  (->> (rp/cmd! :get-file-object-thumbnails {:file-id file-id})
+       (rx/mapcat (fn [thumbnails]
+          (->> (rx/from thumbnails)
+               (rx/mapcat (fn [[k v]]
+                  ;; we only need to fetch the thumbnail if
+                  ;; it is a data:uri, otherwise we can just
+                  ;; use the value as is.
+                  (if (.startsWith v "data:")
+                    (->> (fetch-thumbnail-blob-uri v)
+                         (rx/map (fn [uri] [k uri])))
+                    (rx/of [k v])))))))
+       (rx/reduce conj {})))
+
 (defn- fetch-bundle
   [project-id file-id]
   (ptk/reify ::fetch-bundle
@@ -285,9 +308,8 @@
             ;; WTF is this?
             share-id (-> state :viewer-local :share-id)
             stoper   (rx/filter (ptk/type? ::fetch-bundle) stream)]
-
         (->> (rx/zip (rp/cmd! :get-file {:id file-id :features features})
-                     (rp/cmd! :get-file-object-thumbnails {:file-id file-id})
+                     (fetch-thumbnail-blobs file-id)
                      (rp/cmd! :get-project {:id project-id})
                      (rp/cmd! :get-team-users {:file-id file-id})
                      (rp/cmd! :get-profiles-for-file-comments {:file-id file-id :share-id share-id}))

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

@@ -94,7 +94,7 @@
      (->> (rx/from uris)
           (rx/filter (comp not svg-url?))
           (rx/map prepare)
-          (rx/mapcat #(rp/command! :create-file-media-object-from-url %))
+          (rx/mapcat #(rp/cmd! :create-file-media-object-from-url %))
           (rx/do on-image))
 
      (->> (rx/from uris)

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

@@ -478,7 +478,7 @@
                       :content (data-uri->blob uri)}
                      {:name (extract-name uri)}))))
        (rx/mapcat (fn [uri-data]
-                    (->> (rp/command! (if (contains? uri-data :content)
+                    (->> (rp/cmd! (if (contains? uri-data :content)
                                     :upload-file-media-object
                                     :create-file-media-object-from-url)
                                   uri-data)

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

@@ -14,8 +14,10 @@
    [app.main.refs :as refs]
    [app.main.repo :as rp]
    [app.main.store :as st]
+   [app.main.worker :as uw]
    [app.util.dom :as dom]
-   [app.util.timers :as ts]
+   [app.util.http :as http]
+   [app.util.timers :as tm]
    [app.util.webapi :as wapi]
    [beicon.core :as rx]
    [potok.core :as ptk]))
@@ -29,28 +31,22 @@
        (rx/filter #(= % id))
        (rx/take 1)))
 
-(defn thumbnail-canvas-blob-stream
+(defn get-thumbnail
   [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))
+  (let [node    (dom/query (dm/fmt "image.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))]
+    ;; renders #svg image
     (if (some? node)
-      ;; Success: we generate the blob (async call)
+      (->> (rx/from (js/createImageBitmap node))
-      (rx/create
+           (rx/switch-map  #(uw/ask! {:cmd :thumbnails/render-offscreen-canvas} %))
-       (fn [subs]
+           (rx/map :result))
-         (ts/raf
-          (fn []
-            (.toBlob node (fn [blob]
-                            (rx/push! subs blob)
-                            #_(rx/end! subs))
-                     "image/png")))
-         (constantly nil)))
 
       ;; Not found, we retry after delay
       (->> (rx/timer 250)
-           (rx/flat-map #(thumbnail-canvas-blob-stream object-id))
+           (rx/merge-map (partial get-thumbnail object-id))
            (rx/take-until stopper)))))
 
 (defn clear-thumbnail
@@ -59,8 +55,33 @@
     ptk/UpdateEvent
     (update [_ state]
       (let [object-id  (dm/str page-id frame-id)]
+        (when-let [uri (dm/get-in state [:workspace-thumbnails object-id])]
+          (tm/schedule-on-idle (partial wapi/revoke-uri uri)))
         (update state :workspace-thumbnails dissoc object-id)))))
 
+(defn set-workspace-thumbnail
+  [object-id uri]
+  (let [prev-uri* (volatile! nil)]
+    (ptk/reify ::set-workspace-thumbnail
+      ptk/UpdateEvent
+      (update [_ state]
+        (let [prev-uri (dm/get-in state [:workspace-thumbnails object-id])]
+          (some->> prev-uri (vreset! prev-uri*))
+          (update state :workspace-thumbnails assoc object-id uri)))
+
+      ptk/EffectEvent
+      (effect [_ _ _]
+        (tm/schedule-on-idle #(some-> ^boolean @prev-uri* wapi/revoke-uri))))))
+
+(defn duplicate-thumbnail
+  [old-id new-id]
+  (ptk/reify ::duplicate-thumbnail
+    ptk/UpdateEvent
+    (update [_ state]
+      (let [page-id   (:current-page-id state)
+            thumbnail (dm/get-in state [:workspace-thumbnails (dm/str page-id old-id)])]
+        (update state :workspace-thumbnails assoc (dm/str page-id new-id) thumbnail)))))
+
 (defn update-thumbnail
   "Updates the thumbnail information for the given frame `id`"
   ([page-id frame-id]
@@ -71,38 +92,32 @@
      ptk/WatchEvent
      (watch [_ state _]
        (let [object-id (dm/str page-id frame-id)
-             file-id     (or file-id (:current-file-id state))
+             file-id   (or file-id (:current-file-id state))]
-             blob-result (thumbnail-canvas-blob-stream object-id)
-             params {:file-id file-id :object-id object-id :data nil}]
 
          (rx/concat
           ;; Delete the thumbnail first so if we interrupt we can regenerate after
-          (->> (rp/cmd! :upsert-file-object-thumbnail params)
+          (->> (rp/cmd! :delete-file-object-thumbnail {:file-id file-id :object-id object-id})
-               (rx/catch #(rx/empty)))
+               (rx/catch rx/empty))
-
-          ;; Remove the thumbnail temporary. If the user changes pages the thumbnail is regenerated
-          (rx/of #(update % :workspace-thumbnails assoc object-id nil))
 
           ;; Send the update to the back-end
-          (->> blob-result
+          (->> (get-thumbnail object-id)
+               (rx/filter (fn [data] (and (some? data) (some? file-id))))
                (rx/merge-map
-                (fn [blob]
+                (fn [uri]
-                  (if (some? blob)
-                    (wapi/read-file-as-data-url blob)
-                    (rx/of nil))))
-
-               (rx/merge-map
-                (fn [data]
-                  (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
+                   (rx/of (set-workspace-thumbnail object-id uri))
-                       (rx/of #(update % :workspace-thumbnails assoc object-id data))
+
-                       (->> (rp/cmd! :upsert-file-object-thumbnail params)
+                   (->> (http/send! {:uri uri :response-type :blob :method :get})
-                            (rx/catch #(rx/empty))
+                        (rx/map :body)
-                            (rx/ignore))))
+                        (rx/mapcat (fn [blob]
+                                     ;; Send the data to backend
+                                     (let [params {:file-id file-id
+                                                   :object-id object-id
+                                                   :media blob}]
+                                       (rp/cmd! :create-file-object-thumbnail params))))
+                        (rx/catch rx/empty)
+                        (rx/ignore)))))
 
-                    (rx/empty))))
                (rx/catch #(do (.error js/console %)
                               (rx/empty))))))))))
 
@@ -137,6 +152,7 @@
 
               (and new-frame-id (not= uuid/zero new-frame-id))
               (conj [page-id new-frame-id]))))]
+
     (into #{}
           (comp (mapcat extract-ids)
                 (mapcat get-frame-id))
@@ -154,7 +170,7 @@
                  (rx/filter #(or (= :app.main.data.workspace/finalize-page (ptk/type %))
                                  (= ::watch-state-changes (ptk/type %)))))
 
-            workspace-data-str
+            workspace-data-s
             (->> (rx/concat
                   (rx/of nil)
                   (rx/from-atom refs/workspace-data {:emit-current-value? true}))
@@ -162,33 +178,24 @@
                  ;; deleted objects
                  (rx/buffer 2 1))
 
-            change-str
+            change-s
             (->> stream
                  (rx/filter #(or (dch/commit-changes? %)
                                  (= (ptk/type %) :app.main.data.workspace.notifications/handle-file-change)))
                  (rx/observe-on :async))
 
-            frame-changes-str
+            frame-changes-s
-            (->> change-str
+            (->> change-s
-                 (rx/with-latest-from workspace-data-str)
+                 (rx/with-latest-from workspace-data-s)
                  (rx/flat-map extract-frame-changes)
                  (rx/share))]
 
         (->> (rx/merge
-              (->> frame-changes-str
+              (->> frame-changes-s
                    (rx/filter (fn [[page-id _]] (not= page-id (:current-page-id @st/state))))
                    (rx/map (fn [[page-id frame-id]] (clear-thumbnail page-id frame-id))))
 
-              (->> frame-changes-str
+              (->> frame-changes-s
                    (rx/filter (fn [[page-id _]] (= page-id (:current-page-id @st/state))))
                    (rx/map (fn [[_ frame-id]] (ptk/data-event ::force-render frame-id)))))
              (rx/take-until stopper))))))
-
-(defn duplicate-thumbnail
-  [old-id new-id]
-  (ptk/reify ::duplicate-thumbnail
-    ptk/UpdateEvent
-    (update [_ state]
-      (let [page-id   (:current-page-id state)
-            thumbnail (dm/get-in state [:workspace-thumbnails (dm/str page-id old-id)])]
-        (update state :workspace-thumbnails assoc (dm/str page-id new-id) thumbnail)))))

frontend/src/app/main/repo.cljs

@@ -10,29 +10,8 @@
    [app.common.uri :as u]
    [app.config :as cf]
    [app.util.http :as http]
-   [beicon.core :as rx]))
+   [beicon.core :as rx]
-
+   [cuerdas.core :as str]))
-(derive :get-all-projects ::query)
-(derive :get-comment-threads ::query)
-(derive :get-file ::query)
-(derive :get-file-fragment ::query)
-(derive :get-file-libraries ::query)
-(derive :get-file-object-thumbnails ::query)
-(derive :get-font-variants ::query)
-(derive :get-profile ::query)
-(derive :get-project ::query)
-(derive :get-projects ::query)
-(derive :get-team-invitations ::query)
-(derive :get-team-members ::query)
-(derive :get-team-shared-files ::query)
-(derive :get-team-stats ::query)
-(derive :get-team-users ::query)
-(derive :get-teams ::query)
-(derive :get-view-only-bundle ::query)
-(derive :search-files ::query)
-(derive :retrieve-list-of-builtin-templates ::query)
-(derive :get-unread-comment-threads ::query)
-(derive :get-team-recent-files ::query)
 
 (defn handle-response
   [{:keys [status body] :as response}]
@@ -65,45 +44,41 @@
                :status status
                :data body})))
 
-(defn- send-query!
+(def default-options
-  "A simple helper for send and receive transit data on the penpot
+  {:update-file {:query-params [:id]}
-  query api."
+   :get-raw-file {:rename-to :get-file :raw-transit? true}
-  ([id params]
+   :upsert-file-object-thumbnail {:query-params [:file-id :object-id]}
-   (send-query! id params nil))
+   :create-file-object-thumbnail {:query-params [:file-id :object-id]
-  ([id params {:keys [raw-transit?]}]
+                                  :form-data? true}
-   (let [decode-transit (if raw-transit?
+   :export-binfile {:response-type :blob}
-                          http/conditional-error-decode-transit
+   :import-binfile {:form-data? true}
-                          http/conditional-decode-transit)]
+   :retrieve-list-of-builtin-templates {:query-params :all}
-     (->> (http/send! {:method :get
+   })
-                       :uri (u/join @cf/public-uri "api/rpc/query/" (name id))
-                       :headers {"accept" "application/transit+json"}
-                       :credentials "include"
-                       :query params})
-          (rx/map decode-transit)
-          (rx/mapcat handle-response)))))
 
-(defn- send-mutation!
+(defn- send!
   "A simple helper for a common case of sending and receiving transit
   data to the penpot mutation api."
-  [id params]
+  [id params options]
-  (->> (http/send! {:method :post
+  (let [{:keys [response-type
-                    :uri (u/join @cf/public-uri "api/rpc/mutation/" (name id))
+                form-data?
-                    :headers {"accept" "application/transit+json"}
+                raw-transit?
-                    :credentials "include"
+                query-params
-                    :body (http/transit-data params)})
+                rename-to]}
-       (rx/map http/conditional-decode-transit)
+        (-> (get default-options id)
-       (rx/mapcat handle-response)))
+            (merge options))
 
-(defn- send-command!
+        decode-fn (if raw-transit?
-  "A simple helper for a common case of sending and receiving transit
-  data to the penpot mutation api."
-  [id params {:keys [response-type form-data? raw-transit? forward-query-params]}]
-  (let [decode-fn (if raw-transit?
                     http/conditional-error-decode-transit
                     http/conditional-decode-transit)
-        method    (if (isa? id ::query) :get :post)]
 
-    (->> (http/send! {:method method
+        id        (or rename-to id)
+        nid       (name id)
+        method    (cond
+                    (= query-params :all)  :get
+                    (str/starts-with? nid "get-") :get
+                    :else :post)
+
+        request   {:method method
                    :uri (u/join @cf/public-uri "api/rpc/command/" (name id))
                    :credentials "include"
                    :headers {"accept" "application/transit+json"}
@@ -113,72 +88,22 @@
                              (http/transit-data params)))
                    :query (if (= method :get)
                             params
-                               (if forward-query-params
+                            (if query-params
-                                 (select-keys params forward-query-params)
+                              (select-keys params query-params)
                               nil))
-                      :response-type (or response-type :text)})
+                   :response-type (or response-type :text)}]
+
+    (->> (http/send! request)
          (rx/map decode-fn)
          (rx/mapcat handle-response))))
 
-(defn- dispatch [& args] (first args))
+(defmulti cmd! (fn [id _] id))
 
-(defmulti query dispatch)
+(defmethod cmd! :default
-(defmulti mutation dispatch)
-(defmulti command dispatch)
-
-(defmethod query :default
   [id params]
-  (send-query! id params))
+  (send! id params nil))
 
-(defmethod command :get-raw-file
+(defmethod cmd! :login-with-oidc
-  [_id params]
-  (send-command! :get-file params {:raw-transit? true}))
-
-(defmethod mutation :default
-  [id params]
-  (send-mutation! id params))
-
-(defmethod command :default
-  [id params]
-  (send-command! id params nil))
-
-(defmethod command :update-file
-  [id params]
-  (send-command! id params {:forward-query-params [:id]}))
-
-(defmethod command :upsert-file-object-thumbnail
-  [id params]
-  (send-command! id params {:forward-query-params [:file-id :object-id]}))
-
-(defmethod command :get-file-object-thumbnails
-  [id params]
-  (send-command! id params {:forward-query-params [:file-id]}))
-
-(defmethod command :export-binfile
-  [id params]
-  (send-command! id params {:response-type :blob}))
-
-(defmethod command :import-binfile
-  [id params]
-  (send-command! id params {:form-data? true}))
-
-(defn query!
-  ([id] (query id {}))
-  ([id params] (query id params)))
-
-(defn mutation!
-  ([id] (mutation id {}))
-  ([id params] (mutation id params)))
-
-(defn command!
-  ([id] (command id {}))
-  ([id params] (command id params)))
-
-(defn cmd!
-  ([id] (command id {}))
-  ([id params] (command id params)))
-
-(defmethod command :login-with-oidc
   [_ {:keys [provider] :as params}]
   (let [uri    (u/join @cf/public-uri "api/auth/oauth/" (d/name provider))
         params (dissoc params :provider)]
@@ -199,7 +124,7 @@
        (rx/map http/conditional-decode-transit)
        (rx/mapcat handle-response)))
 
-(defmethod command :export
+(defmethod cmd! :export
   [_ params]
   (let [default {:wait false :blob? false}]
     (send-export (merge default params))))
@@ -208,16 +133,7 @@
 (derive :update-profile-photo ::multipart-upload)
 (derive :update-team-photo ::multipart-upload)
 
-(defmethod mutation ::multipart-upload
+(defmethod cmd! ::multipart-upload
-  [id params]
-  (->> (http/send! {:method :post
-                    :uri  (u/join @cf/public-uri "api/rpc/mutation/" (name id))
-                    :credentials "include"
-                    :body (http/form-data params)})
-       (rx/map http/conditional-decode-transit)
-       (rx/mapcat handle-response)))
-
-(defmethod command ::multipart-upload
   [id params]
   (->> (http/send! {:method :post
                     :uri  (u/join @cf/public-uri "api/rpc/command/" (name id))

frontend/src/app/main/ui/auth/login.cljs

@@ -37,7 +37,7 @@
 (defn- login-with-oidc
   [event provider params]
   (dom/prevent-default event)
-  (->> (rp/command! :login-with-oidc (assoc params :provider provider))
+  (->> (rp/cmd! :login-with-oidc (assoc params :provider provider))
        (rx/subs (fn [{:keys [redirect-uri] :as rsp}]
                   (if redirect-uri
                     (.replace js/location redirect-uri)
@@ -57,7 +57,7 @@
   (dom/prevent-default event)
   (dom/stop-propagation event)
   (let [{:keys [on-error]} (meta params)]
-    (->> (rp/command! :login-with-ldap params)
+    (->> (rp/cmd! :login-with-ldap params)
          (rx/subs (fn [profile]
                     (if-let [token (:invitation-token profile)]
                       (st/emit! (rt/nav :auth-verify-token {} {:token token}))

frontend/src/app/main/ui/auth/register.cljs

@@ -101,7 +101,7 @@
          (fn [form _event]
            (reset! submitted? true)
            (let [cdata (:clean-data @form)]
-             (->> (rp/command! :prepare-register-profile cdata)
+             (->> (rp/cmd! :prepare-register-profile cdata)
                   (rx/map #(merge % params))
                   (rx/finalize #(reset! submitted? false))
                   (rx/subs
@@ -232,7 +232,7 @@
          (fn [form _event]
            (reset! submitted? true)
            (let [params (:clean-data @form)]
-             (->> (rp/command! :register-profile params)
+             (->> (rp/cmd! :register-profile params)
                   (rx/finalize #(reset! submitted? false))
                   (rx/subs on-success
                            (partial handle-register-error form))))))]

frontend/src/app/main/ui/auth/verify_token.cljs

@@ -65,7 +65,7 @@
 
     (mf/with-effect []
       (dom/set-html-title (tr "title.default"))
-      (->> (rp/command! :verify-token {:token token})
+      (->> (rp/cmd! :verify-token {:token token})
            (rx/subs
             (fn [tdata]
               (handle-token tdata))

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

@@ -177,7 +177,7 @@
           (->> (rx/from files)
                (rx/flat-map
                 (fn [file]
-                  (->> (rp/command :has-file-libraries {:file-id (:id file)})
+                  (->> (rp/cmd! :has-file-libraries {:file-id (:id file)})
                        (rx/map #(assoc file :has-libraries? %)))))
                (rx/reduce conj [])
                (rx/subs

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

@@ -46,7 +46,8 @@
   (let [features (cond-> ffeat/enabled
                    (features/active-feature? :components-v2)
                    (conj "components/v2"))]
-    (wrk/ask! {:cmd :thumbnails/generate
+
+    (wrk/ask! {:cmd :thumbnails/generate-for-file
                :revn (:revn file)
                :file-id (:id file)
                :file-name (:name file)

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

@@ -98,7 +98,7 @@
     ;; We just recheck with an additional profile request; this avoids
     ;; some race conditions that causes unexpected redirects on
     ;; invitations workflows (and probably other cases).
-    (->> (rp/command! :get-profile)
+    (->> (rp/cmd! :get-profile)
          (rx/subs (fn [{:keys [id] :as profile}]
                     (if (= id uuid/zero)
                       (st/emit! (rt/nav :auth-login))

frontend/src/app/main/ui/settings/feedback.cljs

@@ -55,7 +55,7 @@
          (fn [form _]
            (reset! loading true)
            (let [data (:clean-data @form)]
-             (->> (rp/command! :send-user-feedback data)
+             (->> (rp/cmd! :send-user-feedback data)
                   (rx/subs on-succes on-error)))))]
 
     [:& fm/form {:class "feedback-form"

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

@@ -88,36 +88,41 @@
 (mf/defc frame-thumbnail-image
   {::mf/wrap-props false}
   [props]
+  (let [shape    (unchecked-get props "shape")
+        bounds   (or (unchecked-get props "bounds")
+                     (gsh/points->selrect (:points shape)))
 
-  (let [shape (obj/get props "shape")
+        shape-id (:id shape)
-        bounds (or (obj/get props "bounds") (gsh/points->selrect (:points shape)))]
+        thumb    (:thumbnail shape)
+
+        debug?   (debug? :thumbnails)
+        safari?  (cf/check-browser? :safari)]
 
-    (when (:thumbnail shape)
     [:*
      [:image.frame-thumbnail
-        {:id (dm/str "thumbnail-" (:id shape))
+      {:id (dm/str "thumbnail-" shape-id)
-         :href (:thumbnail shape)
+       :href thumb
+       :decoding "async"
        :x (:x bounds)
        :y (:y bounds)
        :width (:width bounds)
        :height (:height bounds)
-         ;; DEBUG
+       :style {:filter (when (and (not ^boolean safari?) ^boolean debug?) "sepia(1)")}}]
-         :style {:filter (when (and (not (cf/check-browser? :safari))(debug? :thumbnails)) "sepia(1)")}}]
 
      ;; Safari don't support filters so instead we add a rectangle around the thumbnail
-       (when (and (cf/check-browser? :safari) (debug? :thumbnails))
+     (when (and ^boolean safari? ^boolean debug?)
        [:rect {:x (+ (:x bounds) 4)
                :y (+ (:y bounds) 4)
                :width (- (:width bounds) 8)
                :height (- (:height bounds) 8)
                :stroke "red"
-                 :stroke-width 2}])])))
+               :stroke-width 2}])]))
 
 (mf/defc frame-thumbnail
   {::mf/wrap-props false}
   [props]
-  (let [shape (obj/get props "shape")]
+  (let [shape (unchecked-get props "shape")]
-    (when (:thumbnail shape)
+    (when ^boolean (:thumbnail shape)
       [:> frame-container props
        [:> frame-thumbnail-image props]])))
 

frontend/src/app/main/ui/workspace/header.cljs

@@ -179,7 +179,7 @@
           (->> (rx/of file)
                (rx/flat-map
                 (fn [file]
-                  (->> (rp/command :has-file-libraries {:file-id (:id file)})
+                  (->> (rp/cmd! :has-file-libraries {:file-id (:id file)})
                        (rx/map #(assoc file :has-libraries? %)))))
                (rx/reduce conj [])
                (rx/subs

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

@@ -11,7 +11,6 @@
    [app.common.pages.helpers :as cph]
    [app.main.data.workspace.state-helpers :as wsh]
    [app.main.data.workspace.thumbnails :as dwt]
-   [app.main.fonts :as fonts]
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.context :as ctx]
@@ -80,71 +79,69 @@
       [props]
 
       (let [shape              (unchecked-get props "shape")
-            frame-id      (:id shape)
+            thumbnail?         (unchecked-get props "thumbnail?")
-            objects       (wsh/lookup-page-objects @st/state)
-            node-ref      (mf/use-var nil)
-            modifiers-ref (mf/use-memo (mf/deps frame-id) #(refs/workspace-modifiers-by-frame-id frame-id))
-            modifiers     (mf/deref modifiers-ref)]
 
-        (fdm/use-dynamic-modifiers objects @node-ref modifiers)
-
-        (let [thumbnail?         (unchecked-get props "thumbnail?")
-              fonts              (mf/use-memo (mf/deps shape objects) #(ff/shape->fonts shape objects))
-              fonts              (-> fonts (hooks/use-equal-memo))
-
-              force-render       (mf/use-state false)
-
-              ;; Thumbnail data
             page-id            (mf/use-ctx ctx/current-page-id)
+            frame-id           (:id shape)
+
+            objects            (wsh/lookup-page-objects @st/state)
+
+            node*              (mf/use-var nil)
+            force-render*      (mf/use-state false)
+            force-render?      (deref force-render*)
 
             ;; when `true` we've called the mount for the frame
-              rendered?          (mf/use-var false)
+            rendered*          (mf/use-var false)
+
+            modifiers-ref      (mf/with-memo [frame-id]
+                                 (refs/workspace-modifiers-by-frame-id frame-id))
+            modifiers          (mf/deref modifiers-ref)
+
+
+            fonts              (mf/with-memo [shape objects]
+                                 (ff/shape->fonts shape objects))
+            fonts              (hooks/use-equal-memo fonts)
 
             disable-thumbnail? (d/not-empty? (dm/get-in modifiers [frame-id :modifiers]))
 
             [on-load-frame-dom render-frame? thumbnail-renderer]
-              (ftr/use-render-thumbnail page-id shape node-ref rendered? disable-thumbnail? @force-render)
+            (ftr/use-render-thumbnail page-id shape node* rendered* disable-thumbnail? force-render?)
 
             on-frame-load
-              (fns/use-node-store thumbnail? node-ref rendered? render-frame?)]
+            (fns/use-node-store thumbnail? node* rendered* render-frame?)]
 
-          (mf/use-effect
+        (fdm/use-dynamic-modifiers objects @node* modifiers)
-           (mf/deps fonts)
-           (fn []
-             (->> (rx/from fonts)
-                  (rx/merge-map fonts/fetch-font-css)
-                  (rx/ignore))))
 
-          (mf/use-effect
+        (mf/with-effect []
-           (fn []
           ;; When a change in the data is received a "force-render" event is emitted
           ;; that will force the component to be mounted in memory
-             (let [sub
+          (let [sub (->> (dwt/force-render-stream frame-id)
-                   (->> (dwt/force-render-stream (:id shape))
+                         (rx/take-while #(not @rendered*))
-                        (rx/take-while #(not @rendered?))
+                         (rx/subs #(reset! force-render* true)))]
-                        (rx/subs #(reset! force-render true)))]
+            #(some-> sub rx/dispose!)))
-               #(when sub
-                  (rx/dispose! sub)))))
 
-          (mf/use-effect
+        (mf/with-effect [shape fonts thumbnail? on-load-frame-dom force-render? render-frame?]
-           (mf/deps shape fonts thumbnail? on-load-frame-dom @force-render render-frame?)
+          (when (and (some? @node*)
-           (fn []
+                     (or @rendered*
-             (when (and (some? @node-ref) (or @rendered? (not thumbnail?) @force-render render-frame?))
+                         (not thumbnail?)
-               (mf/mount
+                         force-render?
-                (mf/element frame-shape
+                         render-frame?))
-                            #js {:ref on-load-frame-dom :shape shape :fonts fonts})
+            (let [elem (mf/element frame-shape #js {:ref on-load-frame-dom :shape shape :fonts fonts})]
-
+              (mf/mount elem @node*)
-                @node-ref)
+              (when (not @rendered*)
-               (when (not @rendered?) (reset! rendered? true)))))
+                (reset! rendered* true)))))
 
         [:& shape-container {:shape shape}
-           [:g.frame-container {:id (dm/str "frame-container-" (:id shape))
+         [:g.frame-container {:id (dm/str "frame-container-" frame-id)
                               :key "frame-container"
                               :ref on-frame-load
                               :opacity (when (:hidden shape) 0)}
           [:& ff/fontfaces-style {:fonts fonts}]
           [:g.frame-thumbnail-wrapper
-             {:id (dm/str "thumbnail-container-" (:id shape))
+           {:id (dm/str "thumbnail-container-" frame-id)
             ;; Hide the thumbnail when not displaying
             :opacity (when-not thumbnail? 0)}
-             thumbnail-renderer]]])))))
+           thumbnail-renderer]]
+
+         ]))))
+

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

@@ -22,27 +22,8 @@
    [beicon.core :as rx]
    [cuerdas.core :as str]
    [debug :refer [debug?]]
-   [promesa.core :as p]
    [rumext.v2 :as mf]))
 
-(defn- draw-thumbnail-canvas!
-  [canvas-node img-node]
-  (try
-    (when (and (some? canvas-node) (some? img-node))
-      (let [canvas-context (.getContext canvas-node "2d")
-            canvas-width   (.-width canvas-node)
-            canvas-height  (.-height canvas-node)]
-        (.clearRect canvas-context 0 0 canvas-width canvas-height)
-        (.drawImage canvas-context img-node 0 0 canvas-width canvas-height)
-
-        ;; Set a true on the next animation frame, we make sure the drawImage is completed
-        (ts/raf
-         #(dom/set-data! canvas-node "ready" "true"))
-        true))
-    (catch :default err
-      (.error js/console err)
-      false)))
-
 (defn- remove-image-loading
   "Remove the changes related to change a url for its embed value. This is necessary
   so we don't have to recalculate the thumbnail when the image loads."
@@ -57,18 +38,38 @@
                          (str/starts-with? (.-oldValue change) "http"))))))
     [value]))
 
+(defn- create-svg-blob-uri-from
+  [fixed-width fixed-height rect node style-node]
+  (let [{:keys [x y width height]} rect
+        viewbox (dm/str x " " y " " width " " height)
+
+        ;; This is way faster than creating a node
+        ;; through the DOM API
+        svg-data
+        (dm/fmt "<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" viewBox=\"%\" width=\"%\" height=\"%\" fill=\"none\">% %</svg>"
+                viewbox
+                fixed-width
+                fixed-height
+                (if (some? style-node) (dom/node->xml style-node) "")
+                (dom/node->xml node))
+
+        ;; create SVG blob
+        blob (js/Blob. #js [svg-data] #js {:type "image/svg+xml;charset=utf-8"})
+        url  (dm/str (.createObjectURL js/URL blob) "#svg")]
+    ;; returns the url and the node
+    url))
+
 (defn use-render-thumbnail
-  "Hook that will create the thumbnail thata"
+  "Hook that will create the thumbnail data"
   [page-id {:keys [id] :as shape} node-ref rendered? disable? force-render]
 
-  (let [frame-canvas-ref (mf/use-ref nil)
+  (let [frame-image-ref  (mf/use-ref nil)
-        frame-image-ref (mf/use-ref nil)
 
-        disable-ref? (mf/use-var disable?)
+        disable*         (mf/use-var disable?)
+        regenerate*      (mf/use-var false)
 
-        regenerate-thumbnail (mf/use-var false)
+        all-children-ref (mf/with-memo [id]
-
+                           (refs/all-children-objects id))
-        all-children-ref (mf/use-memo (mf/deps id) #(refs/all-children-objects id))
         all-children     (mf/deref all-children-ref)
 
         {:keys [x y width height] :as shape-bb}
@@ -83,51 +84,46 @@
           [(/ (* width (mth/clamp height 250 2000)) height)
            (mth/clamp height 250 2000)])
 
-        image-url    (mf/use-state nil)
+        svg-uri*          (mf/use-state nil)
-        observer-ref (mf/use-var nil)
+        bitmap-uri*       (mf/use-state nil)
+        observer*         (mf/use-var nil)
 
-        shape-bb-ref (hooks/use-update-var shape-bb)
+        shape-bb*         (hooks/use-update-var shape-bb)
+        updates-s         (mf/use-memo rx/subject)
 
-        updates-str  (mf/use-memo #(rx/subject))
+        thumbnail-uri-ref (mf/with-memo [page-id id]
-
+                            (refs/thumbnail-frame-data page-id id))
-        thumbnail-data-ref (mf/use-memo (mf/deps page-id id) #(refs/thumbnail-frame-data page-id id))
+        thumbnail-uri     (mf/deref thumbnail-uri-ref)
-        thumbnail-data     (mf/deref thumbnail-data-ref)
-
-        ;; We only need the zoom level in Safari. For other browsers we don't want to activate this because
-        ;; will render for every zoom change
-        zoom (when (cf/check-browser? :safari) (mf/deref refs/selected-zoom))
-
-        prev-thumbnail-data (hooks/use-previous thumbnail-data)
 
         ;; State to indicate to the parent that should render the frame
-        render-frame? (mf/use-state (not thumbnail-data))
+        render-frame*     (mf/use-state (not thumbnail-uri))
+        debug?            (debug? :thumbnails)
 
-        ;; State variable to select whether we show the image thumbnail or the canvas thumbnail
-        show-frame-thumbnail (mf/use-state (some? thumbnail-data))
 
-        disable-fills? (or @show-frame-thumbnail (some? @image-url))
+        on-bitmap-load
-
+        (mf/use-fn
-        on-image-load
-        (mf/use-callback
-         (mf/deps @show-frame-thumbnail)
          (fn []
-           (let [canvas-node (mf/ref-val frame-canvas-ref)
+           ;; We revoke the SVG Blob URI to free memory only when we
-                 img-node    (mf/ref-val frame-image-ref)]
+           ;; are sure that it is not used anymore.
-             (when (draw-thumbnail-canvas! canvas-node img-node)
+           (wapi/revoke-uri @svg-uri*)
-               (when-not (cf/check-browser? :safari)
+           (reset! svg-uri* nil)))
-                 (reset! image-url nil))
+
+        on-svg-load
+        (mf/use-callback
+         (fn []
+           (let [image-node (mf/ref-val frame-image-ref)]
+             (dom/set-data! image-node "ready" "true")
 
-               (when @show-frame-thumbnail
-                 (reset! show-frame-thumbnail false))
              ;; If we don't have the thumbnail data saved (normally the first load) we update the data
              ;; when available
-               (when (not @thumbnail-data-ref)
+             (when (not ^boolean @thumbnail-uri-ref)
-                 (st/emit! (dwt/update-thumbnail page-id id) ))
+               (st/emit! (dwt/update-thumbnail page-id id)))
 
-               (reset! render-frame? false)))))
+             (reset! render-frame* false))))
 
         generate-thumbnail
-        (mf/use-callback
+        (mf/use-fn
+         (mf/deps id)
          (fn generate-thumbnail []
            (try
              ;; When starting generating the canvas we mark it as not ready so its not send to back until
@@ -135,158 +131,106 @@
              (let [node @node-ref]
                (if (dom/has-children? node)
                  ;; The frame-content need to have children in order to generate the thumbnail
-                 (let [style-node (dom/query (dm/str "#frame-container-" (:id shape) " style"))
+                 (let [style-node (dom/query (dm/str "#frame-container-" id " style"))
-
+                       url        (create-svg-blob-uri-from fixed-width fixed-height @shape-bb* node style-node)]
-                       {:keys [x y width height]} @shape-bb-ref
+                   (reset! svg-uri* url))
-                       viewbox (dm/str x " " y " " width " " height)
-
-                       ;; This is way faster than creating a node through the DOM API
-                       svg-data
-                       (dm/fmt "<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" viewBox=\"%\" width=\"%\" height=\"%\" fill=\"none\">% %</svg>"
-                               viewbox
-                               width
-                               height
-                               (if (some? style-node) (dom/node->xml style-node) "")
-                               (dom/node->xml node))
-
-                       blob (js/Blob. #js [svg-data] #js {:type "image/svg+xml;charset=utf-8"})
-
-                       img-src (.createObjectURL js/URL blob)]
-                   (reset! image-url img-src))
 
                  ;; Node not yet ready, we schedule a new generation
-                 (ts/schedule generate-thumbnail)))
+                 (ts/raf generate-thumbnail)))
 
              (catch :default e
                (.error js/console e)))))
 
         on-change-frame
-        (mf/use-callback
+        (mf/use-fn
+         (mf/deps id)
          (fn []
-           (when (and (some? @node-ref) @rendered? @regenerate-thumbnail)
+           (when (and ^boolean @node-ref
+                      ^boolean @rendered?
+                      ^boolean @regenerate*)
              (let [loading-images? (some? (dom/query @node-ref "[data-loading='true']"))
-                   loading-fonts? (some? (dom/query (dm/str "#frame-container-" (:id shape) " > style[data-loading='true']")))]
+                   loading-fonts?  (some? (dom/query (dm/str "#frame-container-" id " > style[data-loading='true']")))]
-               (when (and (not loading-images?) (not loading-fonts?))
+               (when (and (not loading-images?)
+                          (not loading-fonts?))
                  (generate-thumbnail)
-                 (reset! regenerate-thumbnail false))))))
+                 (reset! regenerate* false))))))
 
+        ;; When the frame is updated, it is marked as not ready
+        ;; so that it is not sent to the background until
+        ;; it is regenerated.
         on-update-frame
-        (mf/use-callback
+        (mf/use-fn
          (fn []
-           (let [canvas-node (mf/ref-val frame-canvas-ref)]
+           (let [image-node (mf/ref-val frame-image-ref)]
-             (when (not= "false" (dom/get-data canvas-node "ready"))
+             (when (not= "false" (dom/get-data image-node "ready"))
-               (dom/set-data! canvas-node "ready" "false")))
+               (dom/set-data! image-node "ready" "false")))
-           (when (not @disable-ref?)
+           (when-not ^boolean @disable*
-             (reset! render-frame? true)
+             (reset! render-frame* true)
-             (reset! regenerate-thumbnail true))))
+             (reset! regenerate* true))))
 
         on-load-frame-dom
-        (mf/use-callback
+        (mf/use-fn
          (fn [node]
-           (when (and (some? node) (nil? @observer-ref))
+           (when (and (some? node)
-             (when-not (some? @thumbnail-data-ref)
+                      (nil? @observer*))
-               (rx/push! updates-str :update))
+             (when-not (some? @thumbnail-uri-ref)
+               (rx/push! updates-s :update))
 
-             (let [observer (js/MutationObserver. (partial rx/push! updates-str))]
+             (let [observer (js/MutationObserver. (partial rx/push! updates-s))]
                (.observe observer node #js {:childList true :attributes true :attributeOldValue true :characterData true :subtree true})
-               (reset! observer-ref observer)))))]
+               (reset! observer* observer)))))]
 
-    (mf/use-effect
+    (mf/with-effect [thumbnail-uri]
-     (mf/deps thumbnail-data)
+      (when (some? thumbnail-uri)
-     (fn []
+        (reset! bitmap-uri* thumbnail-uri)))
-       (when (and (some? prev-thumbnail-data) (nil? thumbnail-data))
-         (rx/push! updates-str :update))))
 
-    (mf/use-effect
+    (mf/with-effect [force-render]
-     (mf/deps force-render)
+      (when ^boolean force-render
-     (fn []
+        (rx/push! updates-s :update)))
-       (when force-render
-         (rx/push! updates-str :update))))
 
-    (mf/use-effect
+    (mf/with-effect []
-     (fn []
+      (let [subid (->> updates-s
-       (let [subid (->> updates-str
                        (rx/map remove-image-loading)
                        (rx/filter d/not-empty?)
                        (rx/catch (fn [err] (.error js/console err)))
                        (rx/subs on-update-frame))]
-         #(rx/dispose! subid))))
+        (partial rx/dispose! subid)))
 
     ;; on-change-frame will get every change in the frame
-    (mf/use-effect
+    (mf/with-effect []
-     (fn []
+      (let [subid (->> updates-s
-       (let [subid (->> updates-str
                        (rx/debounce 400)
                        (rx/observe-on :af)
                        (rx/catch (fn [err] (.error js/console err)))
                        (rx/subs on-change-frame))]
-         #(rx/dispose! subid))))
+        (partial rx/dispose! subid)))
 
-    (mf/use-effect
+    (mf/with-effect [disable?]
-     (mf/deps disable?)
+      (when (and ^boolean disable?
-     (fn []
+                 (not @disable*))
-       (when (and disable? (not @disable-ref?))
+        (rx/push! updates-s :update))
-         (rx/push! updates-str :update))
+      (reset! disable* disable?)
-       (reset! disable-ref? disable?)))
+      nil)
 
-    (mf/use-effect
+    (mf/with-effect []
       (fn []
-       #(when (and (some? @node-ref) @rendered?)
+        (when (and (some? @node-ref)
+                   ^boolean @rendered?)
           (mf/unmount @node-ref)
           (reset! node-ref nil)
           (reset! rendered? false)
-          (when (some? @observer-ref)
+          (when (some? @observer*)
-            (.disconnect @observer-ref)
+            (.disconnect @observer*)
-            (reset! observer-ref nil)))))
+            (reset! observer* nil)))))
-
-    ;; When the thumbnail-data is empty we regenerate the thumbnail
-    (mf/use-effect
-     (mf/deps (:selrect shape) thumbnail-data)
-     (fn []
-       (let [{:keys [width height]} (:selrect shape)]
-         (p/then (wapi/empty-png-size width height)
-                 (fn [data]
-                   (when (<= (count thumbnail-data) (+ 100 (count data)))
-                     (rx/push! updates-str :update)))))))
 
     [on-load-frame-dom
-     @render-frame?
+     @render-frame*
      (mf/html
-      [:& frame/frame-container {:bounds shape-bb
+      [:& frame/frame-container {:bounds shape-bb :shape shape}
-                                 :shape (cond-> shape
-                                          (some? thumbnail-data)
-                                          (assoc :thumbnail thumbnail-data))}
-
-       (when @show-frame-thumbnail
-         [:> frame/frame-thumbnail-image
-          {:key (dm/str (:id shape))
-           :bounds shape-bb
-           :shape (cond-> shape
-                    (some? thumbnail-data)
-                    (assoc :thumbnail thumbnail-data))}])
-
-       [:foreignObject {:x x
-                        :y y
-                        :width width
-                        :height height
-                        :opacity (when disable-fills? 0)}
-        [:canvas.thumbnail-canvas
-         {:key (dm/str "thumbnail-canvas-" (:id shape))
-          :ref frame-canvas-ref
-          :data-object-id (dm/str page-id (:id shape))
-          :width width
-          :height height
-          :style {;; Safari has a problem with the positioning of the canvas. All this is to fix Safari behavior
-                  ;; https://bugs.webkit.org/show_bug.cgi?id=23113
-                  :display (when (cf/check-browser? :safari) "none")
-                  :position "fixed"
-                  :transform-origin "top left"
-                  :transform (when (cf/check-browser? :safari) (dm/fmt "scale(%)" zoom))
-                  ;; DEBUG
-                  :filter (when (debug? :thumbnails) "invert(1)")}}]]
 
        ;; Safari don't support filters so instead we add a rectangle around the thumbnail
-       (when (and (cf/check-browser? :safari) (debug? :thumbnails))
+       (when (and (cf/check-browser? :safari)
+                  ^boolean debug?)
          [:rect {:x (+ x 2)
                  :y (+ y 2)
                  :width (- width 4)
@@ -294,13 +238,32 @@
                  :stroke "blue"
                  :stroke-width 2}])
 
-       (when (some? @image-url)
+       ;; This is similar to how double-buffering works.
-         [:foreignObject {:x x
+       ;; In svg-uri* we keep the SVG image that is used to
+       ;; render the bitmap until the bitmap is ready
+       ;; to be rendered on screen. Then we remove the
+       ;; svg and keep the bitmap one.
+       ;; This is the "buffer" that keeps the bitmap image.
+       (when ^boolean @bitmap-uri*
+         [:image.thumbnail-bitmap
+          {:x x
            :y y
-                          :width fixed-width
+           :width width
-                          :height fixed-height}
+           :height height
-          [:img {:ref frame-image-ref
+           :href @bitmap-uri*
-                 :src @image-url
+           :style {:filter (when ^boolean debug? "sepia(1)")}
-                 :width fixed-width
+           :on-load on-bitmap-load}])
-                 :height fixed-height
+
-                 :on-load on-image-load}]])])]))
+       ;; This is the "buffer" that keeps the SVG image.
+       (when ^boolean @svg-uri*
+         [:image.thumbnail-canvas
+          {:x x
+           :y y
+           :key (dm/str "thumbnail-canvas-" id)
+           :data-object-id (dm/str page-id id)
+           :width width
+           :height height
+           :ref frame-image-ref
+           :href @svg-uri*
+           :style {:filter (when ^boolean debug? "sepia(0.5)")}
+           :on-load on-svg-load}])])]))

frontend/src/app/main/worker.cljs

@@ -26,13 +26,19 @@
     (reset! instance worker)))
 
 (defn ask!
-  [message]
+  ([message]
    (when @instance (uw/ask! @instance message)))
+  ([message transfer]
+   (when @instance (uw/ask! @instance message transfer))))
 
 (defn ask-buffered!
-  [message]
+  ([message]
    (when @instance (uw/ask-buffered! @instance message)))
+  ([message transfer]
+   (when @instance (uw/ask-buffered! @instance message transfer))))
 
 (defn ask-many!
-  [message]
+  ([message]
    (when @instance (uw/ask-many! @instance message)))
+  ([message transfer]
+   (when @instance (uw/ask-many! @instance message transfer))))

frontend/src/app/util/text_svg_position.cljs

@@ -57,7 +57,7 @@
     (-> (fonts/ensure-loaded! font-id)
         (p/then #(when (not (dom/check-font? font))
                    (load-font font)))
-        (p/catch #(.error js/console (dm/str "Cannot load font" font-id) %)))))
+        (p/catch #(.error js/console (dm/str "Cannot load font " font-id) %)))))
 
 (defn- calc-text-node-positions
   [shape-id]

frontend/src/app/util/webapi.cljs

@@ -51,8 +51,8 @@
 
 (defn revoke-uri
   [url]
-  (assert (string? url) "invalid arguments")
+  (when ^boolean (str/starts-with? url "blob:")
-  (js/URL.revokeObjectURL url))
+    (js/URL.revokeObjectURL url)))
 
 (defn create-uri
   "Create a url from blob."

frontend/src/app/util/worker.cljs

@@ -8,6 +8,7 @@
   "A lightweight layer on top of webworkers api."
   (:require
    [app.common.uuid :as uuid]
+   [app.util.object :as obj]
    [app.worker.messages :as wm]
    [beicon.core :as rx]))
 
@@ -25,11 +26,14 @@
              (rx/take-while #(not (:completed %)) ob)
              (rx/take 1 ob)))
 
-         data (wm/encode message)
+         transfer (:transfer message)
+         data (cond-> (wm/encode (dissoc message :transfer))
+                (some? transfer)
+                (obj/set! "transfer" transfer))
          instance (:instance worker)]
 
      (if (some? instance)
-       (do (.postMessage instance data)
+       (do (.postMessage instance data transfer)
            (->> (:stream worker)
                 (rx/filter #(= (:reply-to %) sender-id))
                 (take-messages)
@@ -38,27 +42,36 @@
        (rx/empty)))))
 
 (defn ask!
-  [worker message]
+  ([worker message]
-  (send-message!
+   (ask! worker message nil))
-   worker
+  ([worker message transfer]
-   {:sender-id (uuid/next)
-    :payload message}))
-
-(defn ask-many!
-  [worker message]
-  (send-message!
-   worker
-   {:sender-id (uuid/next)
-    :payload message}
-   {:many? true}))
-
-(defn ask-buffered!
-  [worker message]
    (send-message!
     worker
     {:sender-id (uuid/next)
      :payload message
-    :buffer? true}))
+     :transfer transfer})))
+
+(defn ask-many!
+  ([worker message]
+   (ask-many! worker message nil))
+  ([worker message transfer]
+   (send-message!
+    worker
+    {:sender-id (uuid/next)
+     :payload message
+     :transfer transfer}
+    {:many? true})))
+
+(defn ask-buffered!
+  ([worker message]
+   (ask-buffered! worker message nil))
+  ([worker message transfer]
+   (send-message!
+    worker
+    {:sender-id (uuid/next)
+     :payload message
+     :buffer? true
+     :transfer transfer})))
 
 (defn init
   "Return a initialized webworker instance."

frontend/src/app/worker.cljs

@@ -9,6 +9,7 @@
    [app.common.data.macros :as dm]
    [app.common.logging :as log]
    [app.common.schema :as sm]
+   [app.util.object :as obj]
    [app.worker.export]
    [app.worker.impl :as impl]
    [app.worker.import]
@@ -38,7 +39,7 @@
 
 (defn- handle-message
   "Process the message and returns to the client"
-  [{:keys [sender-id payload] :as message}]
+  [{:keys [sender-id payload transfer] :as message}]
   (dm/assert! (message? message))
   (letfn [(post [msg]
             (let [msg (-> msg (assoc :reply-to sender-id) (wm/encode))]
@@ -63,7 +64,7 @@
                           :completed true})))]
 
     (try
-      (let [result (impl/handler payload)
+      (let [result (impl/handler payload transfer)
             promise? (p/promise? result)
             stream? (or (rx/observable? result) (rx/subject? result))]
 
@@ -145,7 +146,10 @@
   [event]
   (when (nil? (.-source event))
     (let [message (.-data event)
-          message (wm/decode message)]
+          transfer (obj/get message "transfer")
+          message (cond-> (wm/decode message)
+                    (some? transfer)
+                    (assoc :transfer transfer))]
       (if (:buffer? message)
         (rx/push! buffer message)
         (handle-message message)))))

frontend/src/app/worker/export.cljs

@@ -474,7 +474,7 @@
   (->> (rx/from files)
        (rx/mapcat
         (fn [file]
-          (->> (rp/command! :export-binfile {:file-id (:id file)
+          (->> (rp/cmd! :export-binfile {:file-id (:id file)
                                          :include-libraries? (= export-type :all)
                                          :embed-assets? (= export-type :merge)})
                (rx/map #(hash-map :type :finish

frontend/src/app/worker/import.cljs

@@ -672,7 +672,7 @@
                          :response-type :blob
                          :method :get})
                        (rx/map :body)
-                       (rx/mapcat #(rp/command! :import-binfile {:file %
+                       (rx/mapcat #(rp/cmd! :import-binfile {:file %
                                                                  :project-id project-id}))
                        (rx/map
                         (fn [_]

frontend/src/app/worker/thumbnails.cljs

@@ -16,6 +16,7 @@
    [app.worker.impl :as impl]
    [beicon.core :as rx]
    [debug :refer [debug?]]
+   [promesa.core :as p]
    [rumext.v2 :as mf]))
 
 (log/set-level! :trace)
@@ -110,8 +111,8 @@
          (rx/catch body-too-large? (constantly (rx/of nil)))
          (rx/map (constantly params)))))
 
-(defmethod impl/handler :thumbnails/generate
+(defmethod impl/handler :thumbnails/generate-for-file
-  [{:keys [file-id revn features] :as message}]
+  [{:keys [file-id revn features] :as message} _]
   (letfn [(on-result [{:keys [data props]}]
             {:data data
              :fonts (:fonts props)})
@@ -130,3 +131,18 @@
                      (log/debug :hint "request-thumbnail" :file-id file-id :revn revn :cache "hit")))
            (rx/catch not-found? on-cache-miss)
            (rx/map on-result)))))
+
+(defmethod impl/handler :thumbnails/render-offscreen-canvas
+  [_ ibpm]
+  (let [canvas (js/OffscreenCanvas. (.-width ^js ibpm) (.-height ^js ibpm))
+        ctx    (.getContext ^js canvas "bitmaprenderer")]
+
+    (.transferFromImageBitmap ^js ctx ibpm)
+
+    (->> (.convertToBlob ^js canvas #js {:type "image/png"})
+         (p/fmap (fn [blob]
+                   (js/console.log "[worker]: generated thumbnail")
+                   {:result (.createObjectURL js/URL blob)}))
+         (p/fnly (fn [_]
+                   (.close ^js ibpm))))))
+