🎉 Render dashbaord thumbnails on webworker.

frontend/src/uxbox/main/fonts.cljs

@@ -124,15 +124,16 @@
 
 (defmethod load-font :google
   [{:keys [id family variants ::on-loaded] :as font}]
-  (js/console.log "[debug:fonts]: loading google font" id)
+  (when (exists? js/window)
-  (let [base (str "https://fonts.googleapis.com/css?family=" family)
+    (js/console.log "[debug:fonts]: loading google font" id)
-        variants (str/join "," (map :id variants))
+    (let [base (str "https://fonts.googleapis.com/css?family=" family)
-        uri (str base ":" variants "&display=block")
+          variants (str/join "," (map :id variants))
-        node (create-link-node uri)]
+          uri (str base ":" variants "&display=block")
-    (.addEventListener node "load" (fn [event] (when (fn? on-loaded)
+          node (create-link-node uri)]
-                                                 (on-loaded id))))
+      (.addEventListener node "load" (fn [event] (when (fn? on-loaded)
-    (.append (.-head js/document) node)
+                                                   (on-loaded id))))
-    nil))
+      (.append (.-head js/document) node)
+      nil)))
 
 (defmethod load-font :default
   [{:keys [backend] :as font}]

frontend/src/uxbox/main/ui.cljs

@@ -27,7 +27,6 @@
    [uxbox.main.ui.profile.recovery-request :refer [profile-recovery-request-page]]
    [uxbox.main.ui.profile.register :refer [profile-register-page]]
    [uxbox.main.ui.settings :as settings]
-   [uxbox.main.ui.shapes]
    [uxbox.main.ui.viewer :refer [viewer-page]]
    [uxbox.main.ui.workspace :as workspace]
    [uxbox.util.i18n :refer [tr]]

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

@@ -1,15 +1,17 @@
 (ns uxbox.main.ui.dashboard.grid
   (:require
    [cuerdas.core :as str]
+   [beicon.core :as rx]
    [rumext.alpha :as mf]
    [uxbox.builtins.icons :as i]
    [uxbox.main.data.dashboard :as dsh]
    [uxbox.main.store :as st]
-   [uxbox.main.exports :as exports]
    [uxbox.main.ui.modal :as modal]
    [uxbox.main.ui.keyboard :as kbd]
    [uxbox.main.ui.confirm :refer [confirm-dialog]]
    [uxbox.main.ui.components.context-menu :refer [context-menu]]
+   [uxbox.main.worker :as wrk]
+   [uxbox.main.fonts :as fonts]
    [uxbox.util.dom :as dom]
    [uxbox.util.i18n :as i18n :refer [t tr]]
    [uxbox.util.router :as rt]
@@ -19,12 +21,19 @@
 ;; --- Grid Item Thumbnail
 
 (mf/defc grid-item-thumbnail
-  {::mf/wrap [#(mf/deferred % ts/schedule-on-idle)]}
+  {::mf/wrap [mf/memo]}
   [{:keys [file] :as props}]
-  [:div.grid-item-th
+  (let [container (mf/use-ref)]
-   [:& exports/page-svg {:data (:data file)
+    (mf/use-effect
-                         :width "290"
+     (mf/deps file)
-                         :height "150"}]])
+     (fn []
+       (-> (wrk/ask! {:cmd :thumbnails/generate
+                      :data (:data file)})
+           (rx/subscribe (fn [{:keys [svg fonts]}]
+                           (run! fonts/ensure-loaded! fonts)
+                           (let [node (mf/ref-val container)]
+                             (set! (.-innerHTML node) svg)))))))
+    [:div.grid-item-th {:ref container}]))
 
 ;; --- Grid Item
 

frontend/src/uxbox/main/ui/shapes/text.cljs

@@ -117,8 +117,8 @@
 (mf/defc text-shape
   {::mf/wrap-props false}
   [props]
-  (let [shape (unchecked-get props "shape")
+  (let [shape     (unchecked-get props "shape")
-        shape (unchecked-get props "selected?")
+        selected? (unchecked-get props "selected?")
         {:keys [id x y width height rotation content]} shape]
     [:foreignObject {:x x
                      :y y

frontend/src/uxbox/util/http.cljs

@@ -7,14 +7,16 @@
 (ns uxbox.util.http
   "A http client with rx streams interface."
   (:refer-clojure :exclude [get])
-  (:require [beicon.core :as rx]
+  (:require
-            [goog.events :as events]
+   [beicon.core :as rx]
-            [clojure.string :as str])
+   [goog.events :as events]
-  (:import [goog.net ErrorCode EventType]
+   [clojure.string :as str])
-           [goog.net.XhrIo ResponseType]
+  (:import
-           [goog.net XhrIo]
+   [goog.net ErrorCode EventType]
-           [goog.Uri QueryData]
+   [goog.net.XhrIo ResponseType]
-           [goog Uri]))
+   [goog.net XhrIo]
+   [goog.Uri QueryData]
+   [goog Uri]))
 
 (defn translate-method
   [method]

frontend/src/uxbox/worker.cljs

@@ -18,6 +18,7 @@
    [uxbox.common.uuid :as uuid]
    [uxbox.worker.impl :as impl]
    [uxbox.worker.selection]
+   [uxbox.worker.thumbnails]
    [uxbox.util.transit :as t]
    [uxbox.util.worker :as w]))
 

frontend/src/uxbox/worker/thumbnails.cljs

@@ -13,22 +13,16 @@
    [cljs.spec.alpha :as s]
    [uxbox.common.exceptions :as ex]
    [uxbox.common.spec :as us]
+   [uxbox.main.fonts :as fonts]
    [uxbox.main.exports :as exports]
    [uxbox.worker.impl :as impl]
    ["react-dom/server" :as rds]))
 
-(mf/defc foobar
-  [{:keys [name]}]
-  [:span name])
-
-(defmethod impl/handler :echo
-  [message]
-  {:result (rds/renderToString (mf/element foobar {:name "foobar"}))})
-
 (defmethod impl/handler :thumbnails/generate
   [{:keys [data] :as message}]
   (let [elem (mf/element exports/page-svg #js {:data data
                                                :width "290"
                                                :height "150"})]
-    (rds/renderToStaticMarkup elem)))
+    {:svg (rds/renderToStaticMarkup elem)
+     :fonts @fonts/loaded}))