From adfa117dc0f4dc32ccf3108bd3e3a977c56a3401 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Tue, 5 May 2020 19:48:51 +0200 Subject: [PATCH] :tada: Render dashbaord thumbnails on webworker. --- frontend/src/uxbox/main/fonts.cljs | 19 +++++++++-------- frontend/src/uxbox/main/ui.cljs | 1 - .../src/uxbox/main/ui/dashboard/grid.cljs | 21 +++++++++++++------ frontend/src/uxbox/main/ui/shapes/text.cljs | 4 ++-- frontend/src/uxbox/util/http.cljs | 18 +++++++++------- frontend/src/uxbox/worker.cljs | 1 + frontend/src/uxbox/worker/thumbnails.cljs | 12 +++-------- 7 files changed, 41 insertions(+), 35 deletions(-) diff --git a/frontend/src/uxbox/main/fonts.cljs b/frontend/src/uxbox/main/fonts.cljs index 0780bfd13..5e7abf581 100644 --- a/frontend/src/uxbox/main/fonts.cljs +++ b/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) - (let [base (str "https://fonts.googleapis.com/css?family=" family) - variants (str/join "," (map :id variants)) - uri (str base ":" variants "&display=block") - node (create-link-node uri)] - (.addEventListener node "load" (fn [event] (when (fn? on-loaded) - (on-loaded id)))) - (.append (.-head js/document) node) - nil)) + (when (exists? js/window) + (js/console.log "[debug:fonts]: loading google font" id) + (let [base (str "https://fonts.googleapis.com/css?family=" family) + variants (str/join "," (map :id variants)) + uri (str base ":" variants "&display=block") + node (create-link-node uri)] + (.addEventListener node "load" (fn [event] (when (fn? on-loaded) + (on-loaded id)))) + (.append (.-head js/document) node) + nil))) (defmethod load-font :default [{:keys [backend] :as font}] diff --git a/frontend/src/uxbox/main/ui.cljs b/frontend/src/uxbox/main/ui.cljs index 76aac1b0c..c70841742 100644 --- a/frontend/src/uxbox/main/ui.cljs +++ b/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]] diff --git a/frontend/src/uxbox/main/ui/dashboard/grid.cljs b/frontend/src/uxbox/main/ui/dashboard/grid.cljs index 059ae22ec..6dd46f2b8 100644 --- a/frontend/src/uxbox/main/ui/dashboard/grid.cljs +++ b/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 - [:& exports/page-svg {:data (:data file) - :width "290" - :height "150"}]]) + (let [container (mf/use-ref)] + (mf/use-effect + (mf/deps file) + (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 diff --git a/frontend/src/uxbox/main/ui/shapes/text.cljs b/frontend/src/uxbox/main/ui/shapes/text.cljs index 00c224856..9d4652cb9 100644 --- a/frontend/src/uxbox/main/ui/shapes/text.cljs +++ b/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") - shape (unchecked-get props "selected?") + (let [shape (unchecked-get props "shape") + selected? (unchecked-get props "selected?") {:keys [id x y width height rotation content]} shape] [:foreignObject {:x x :y y diff --git a/frontend/src/uxbox/util/http.cljs b/frontend/src/uxbox/util/http.cljs index a33309621..54508d729 100644 --- a/frontend/src/uxbox/util/http.cljs +++ b/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] - [goog.events :as events] - [clojure.string :as str]) - (:import [goog.net ErrorCode EventType] - [goog.net.XhrIo ResponseType] - [goog.net XhrIo] - [goog.Uri QueryData] - [goog Uri])) + (:require + [beicon.core :as rx] + [goog.events :as events] + [clojure.string :as str]) + (:import + [goog.net ErrorCode EventType] + [goog.net.XhrIo ResponseType] + [goog.net XhrIo] + [goog.Uri QueryData] + [goog Uri])) (defn translate-method [method] diff --git a/frontend/src/uxbox/worker.cljs b/frontend/src/uxbox/worker.cljs index c5ee4ef01..3327f7d0a 100644 --- a/frontend/src/uxbox/worker.cljs +++ b/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])) diff --git a/frontend/src/uxbox/worker/thumbnails.cljs b/frontend/src/uxbox/worker/thumbnails.cljs index 9603813cd..3470b2a67 100644 --- a/frontend/src/uxbox/worker/thumbnails.cljs +++ b/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}))