Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-23 06:58:58 -05:00
Code Issues Activity

🎉 Add lazy loading of thumbnails on dashboard

Browse source
This commit is contained in:
Andrey Antukh 2022-09-28 09:40:14 +02:00
parent 8fec5af55e
commit 748499a26f
5 changed files with 250 additions and 165 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
backend/src/app/rpc/mutations/files.clj
View file

@ -565,6 +565,8 @@
(s/keys :req-un [::profile-id ::file-id ::revn ::data ::props])) (s/keys :req-un [::profile-id ::file-id ::revn ::data ::props]))
(sv/defmethod ::upsert-file-thumbnail (sv/defmethod ::upsert-file-thumbnail
"Creates or updates the file thumbnail. Mainly used for paint the
grid thumbnals."
[{:keys [pool] :as cfg} {:keys [profile-id file-id revn data props]}] [{:keys [pool] :as cfg} {:keys [profile-id file-id revn data props]}]
(db/with-atomic [conn pool] (db/with-atomic [conn pool]
(files/check-edition-permissions! conn profile-id file-id) (files/check-edition-permissions! conn profile-id file-id)

153
frontend/src/app/main/ui/dashboard/grid.cljs
View file

@ -6,9 +6,10 @@
(ns app.main.ui.dashboard.grid (ns app.main.ui.dashboard.grid
(:require (:require
[app.common.data.macros :as dm]
[app.common.logging :as log] [app.common.logging :as log]
[app.main.data.dashboard :as dd] [app.main.data.dashboard :as dd]
[app.main.data.messages :as dm] [app.main.data.messages :as msg]
[app.main.features :as features] [app.main.features :as features]
[app.main.fonts :as fonts] [app.main.fonts :as fonts]
[app.main.refs :as refs] [app.main.refs :as refs]
@ -19,43 +20,57 @@
[app.main.ui.dashboard.import :refer [use-import-file]] [app.main.ui.dashboard.import :refer [use-import-file]]
[app.main.ui.dashboard.inline-edition :refer [inline-edition]] [app.main.ui.dashboard.inline-edition :refer [inline-edition]]
[app.main.ui.dashboard.placeholder :refer [empty-placeholder loading-placeholder]] [app.main.ui.dashboard.placeholder :refer [empty-placeholder loading-placeholder]]
[app.main.ui.hooks :as h]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.main.worker :as wrk] [app.main.worker :as wrk]
[app.util.dom :as dom] [app.util.dom :as dom]
[app.util.dom.dnd :as dnd] [app.util.dom.dnd :as dnd]
[app.util.i18n :as i18n :refer [tr]] [app.util.i18n :as i18n :refer [tr]]
[app.util.keyboard :as kbd] [app.util.keyboard :as kbd]
[app.util.perf :as perf]
[app.util.time :as dt] [app.util.time :as dt]
[app.util.timers :as ts] [app.util.timers :as ts]
[beicon.core :as rx] [beicon.core :as rx]
[cuerdas.core :as str]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
(log/set-level! :warn) (log/set-level! :info)
;; --- Grid Item Thumbnail ;; --- Grid Item Thumbnail
(defn ask-for-thumbnail (defn ask-for-thumbnail
"Creates some hooks to handle the files thumbnails cache" "Creates some hooks to handle the files thumbnails cache"
[file] [file]
(let [components-v2 (features/active-feature? :components-v2)] (wrk/ask! {:cmd :thumbnails/generate
(wrk/ask! {:cmd :thumbnails/generate :revn (:revn file)
:revn (:revn file) :file-id (:id file)
:file-id (:id file) :file-name (:name file)
:components-v2 components-v2}))) :components-v2 (features/active-feature? :components-v2)}))
(mf/defc grid-item-thumbnail (mf/defc grid-item-thumbnail
{::mf/wrap [mf/memo]} {::mf/wrap [mf/memo]}
[{:keys [file] :as props}] [{:keys [file] :as props}]
(let [container (mf/use-ref)] (let [container (mf/use-ref)
(mf/with-effect [file] bgcolor (dm/get-in file [:data :options :background])
(->> (ask-for-thumbnail file) visible? (h/use-visible container :once? true)]
(rx/subs (fn [{:keys [data fonts] :as params}]
(run! fonts/ensure-loaded! fonts)
(when-let [node (mf/ref-val container)]
(dom/set-html! node data))))))
[:div.grid-item-th {:style {:background-color (get-in file [:data :options :background])} (mf/with-effect [file visible?]
:ref container} (when visible?
(let [tp (perf/tpoint)]
(->> (ask-for-thumbnail file)
(rx/subscribe-on :af)
(rx/subs (fn [{:keys [data fonts] :as params}]
(run! fonts/ensure-loaded! fonts)
(log/info :hint "loaded thumbnail"
:file-id (dm/str (:id file))
:file-name (:name file)
:elapsed (str/ffmt "%ms" (tp)))
(when-let [node (mf/ref-val container)]
(dom/set-html! node data))))))))
[:div.grid-item-th
{:style {:background-color bgcolor}
:ref container}
i/loader-pencil])) i/loader-pencil]))
;; --- Grid Item Library ;; --- Grid Item Library
@ -144,6 +159,7 @@
(mf/defc grid-item-metadata (mf/defc grid-item-metadata
[{:keys [modified-at]}] [{:keys [modified-at]}]
(let [locale (mf/deref i18n/locale) (let [locale (mf/deref i18n/locale)
time (dt/timeago modified-at {:locale locale})] time (dt/timeago modified-at {:locale locale})]
[:span.date [:span.date
@ -159,18 +175,19 @@
(mf/defc grid-item (mf/defc grid-item
{:wrap [mf/memo]} {:wrap [mf/memo]}
[{:keys [file navigate? origin library-view?] :as props}] [{:keys [file navigate? origin library-view?] :as props}]
(let [file-id (:id file) (let [file-id (:id file)
local (mf/use-state {:menu-open false local (mf/use-state {:menu-open false
:menu-pos nil :menu-pos nil
:edition false}) :edition false})
selected-files (mf/deref refs/dashboard-selected-files) selected-files (mf/deref refs/dashboard-selected-files)
dashboard-local (mf/deref refs/dashboard-local) dashboard-local (mf/deref refs/dashboard-local)
item-ref (mf/use-ref) node-ref (mf/use-ref)
menu-ref (mf/use-ref) menu-ref (mf/use-ref)
selected? (contains? selected-files file-id)
selected? (contains? selected-files file-id)
on-menu-close on-menu-close
(mf/use-callback (mf/use-fn
#(swap! local assoc :menu-open false)) #(swap! local assoc :menu-open false))
on-select on-select
@ -184,7 +201,7 @@
(st/emit! (dd/toggle-file-select file))))) (st/emit! (dd/toggle-file-select file)))))
on-navigate on-navigate
(mf/use-callback (mf/use-fn
(mf/deps file) (mf/deps file)
(fn [event] (fn [event]
(let [menu-icon (mf/ref-val menu-ref) (let [menu-icon (mf/ref-val menu-ref)
@ -193,14 +210,14 @@
(st/emit! (dd/go-to-workspace file)))))) (st/emit! (dd/go-to-workspace file))))))
on-drag-start on-drag-start
(mf/use-callback (mf/use-fn
(mf/deps selected-files) (mf/deps selected-files)
(fn [event] (fn [event]
(let [offset (dom/get-offset-position (.-nativeEvent event)) (let [offset (dom/get-offset-position (.-nativeEvent event))
select-current? (not (contains? selected-files (:id file))) select-current? (not (contains? selected-files (:id file)))
item-el (mf/ref-val item-ref) item-el (mf/ref-val node-ref)
counter-el (create-counter-element item-el counter-el (create-counter-element item-el
(if select-current? (if select-current?
1 1
@ -221,7 +238,7 @@
(ts/raf #(.removeChild ^js item-el counter-el))))) (ts/raf #(.removeChild ^js item-el counter-el)))))
on-menu-click on-menu-click
(mf/use-callback (mf/use-fn
(mf/deps file selected?) (mf/deps file selected?)
(fn [event] (fn [event]
(dom/prevent-default event) (dom/prevent-default event)
@ -236,14 +253,14 @@
:menu-pos position)))) :menu-pos position))))
edit edit
(mf/use-callback (mf/use-fn
(mf/deps file) (mf/deps file)
(fn [name] (fn [name]
(st/emit! (dd/rename-file (assoc file :name name))) (st/emit! (dd/rename-file (assoc file :name name)))
(swap! local assoc :edition false))) (swap! local assoc :edition false)))
on-edit on-edit
(mf/use-callback (mf/use-fn
(mf/deps file) (mf/deps file)
(fn [event] (fn [event]
(dom/stop-propagation event) (dom/stop-propagation event)
@ -251,16 +268,14 @@
:edition true :edition true
:menu-open false)))] :menu-open false)))]
(mf/use-effect (mf/with-effect [selected? local]
(mf/deps selected? local) (when (and (not selected?) (:menu-open @local))
(fn [] (swap! local assoc :menu-open false)))
(when (and (not selected?) (:menu-open @local))
(swap! local assoc :menu-open false))))
[:div.grid-item.project-th [:div.grid-item.project-th
{:class (dom/classnames :selected selected? {:class (dom/classnames :selected selected?
:library library-view?) :library library-view?)
:ref item-ref :ref node-ref
:draggable true :draggable true
:on-click on-select :on-click on-select
:on-double-click on-navigate :on-double-click on-navigate
@ -296,13 +311,15 @@
:origin origin :origin origin
:dashboard-local dashboard-local}])]]])) :dashboard-local dashboard-local}])]]]))
(mf/defc grid (mf/defc grid
[{:keys [files project on-create-clicked origin limit library-view?] :as props}] [{:keys [files project on-create-clicked origin limit library-view?] :as props}]
(let [dragging? (mf/use-state false) (let [dragging? (mf/use-state false)
project-id (:id project) project-id (:id project)
node-ref (mf/use-var nil)
on-finish-import on-finish-import
(mf/use-callback (mf/use-fn
(fn [] (fn []
(st/emit! (dd/fetch-files {:project-id project-id}) (st/emit! (dd/fetch-files {:project-id project-id})
(dd/fetch-shared-files) (dd/fetch-shared-files)
@ -311,7 +328,7 @@
import-files (use-import-file project-id on-finish-import) import-files (use-import-file project-id on-finish-import)
on-drag-enter on-drag-enter
(mf/use-callback (mf/use-fn
(fn [e] (fn [e]
(when (or (dnd/has-type? e "Files") (when (or (dnd/has-type? e "Files")
(dnd/has-type? e "application/x-moz-file")) (dnd/has-type? e "application/x-moz-file"))
@ -319,32 +336,34 @@
(reset! dragging? true)))) (reset! dragging? true))))
on-drag-over on-drag-over
(mf/use-callback (mf/use-fn
(fn [e] (fn [e]
(when (or (dnd/has-type? e "Files") (when (or (dnd/has-type? e "Files")
(dnd/has-type? e "application/x-moz-file")) (dnd/has-type? e "application/x-moz-file"))
(dom/prevent-default e)))) (dom/prevent-default e))))
on-drag-leave on-drag-leave
(mf/use-callback (mf/use-fn
(fn [e] (fn [e]
(when-not (dnd/from-child? e) (when-not (dnd/from-child? e)
(reset! dragging? false)))) (reset! dragging? false))))
on-drop on-drop
(mf/use-callback (mf/use-fn
(fn [e] (fn [e]
(when (or (dnd/has-type? e "Files") (when (or (dnd/has-type? e "Files")
(dnd/has-type? e "application/x-moz-file")) (dnd/has-type? e "application/x-moz-file"))
(dom/prevent-default e) (dom/prevent-default e)
(reset! dragging? false) (reset! dragging? false)
(import-files (.-files (.-dataTransfer e))))))] (import-files (.-files (.-dataTransfer e))))))
]
[:section.dashboard-grid {:on-drag-enter on-drag-enter [:section.dashboard-grid
:on-drag-over on-drag-over {:on-drag-enter on-drag-enter
:on-drag-leave on-drag-leave :on-drag-over on-drag-over
:on-drop on-drop} :on-drag-leave on-drag-leave
:on-drop on-drop
:ref node-ref}
(cond (cond
(nil? files) (nil? files)
[:& loading-placeholder] [:& loading-placeholder]
@ -352,8 +371,10 @@
(seq files) (seq files)
[:div.grid-row [:div.grid-row
{:style {:grid-template-columns (str "repeat(" limit ", 1fr)")}} {:style {:grid-template-columns (str "repeat(" limit ", 1fr)")}}
(when @dragging? (when @dragging?
[:div.grid-item]) [:div.grid-item])
(for [item files] (for [item files]
[:& grid-item [:& grid-item
{:file item {:file item
@ -361,21 +382,21 @@
:navigate? true :navigate? true
:origin origin :origin origin
:library-view? library-view?}])] :library-view? library-view?}])]
:else :else
[:& empty-placeholder {:default? (:is-default project) [:& empty-placeholder
:on-create-clicked on-create-clicked {:default? (:is-default project)
:project project :on-create-clicked on-create-clicked
:limit limit :project project
:origin origin}])])) :limit limit
:origin origin}])]))
(mf/defc line-grid-row (mf/defc line-grid-row
[{:keys [files selected-files dragging? limit] :as props}] [{:keys [files selected-files dragging? limit] :as props}]
(let [limit (if dragging? (let [limit (if dragging? (dec limit) limit)]
(dec limit)
limit)]
[:div.grid-row.no-wrap [:div.grid-row.no-wrap
{:style {:grid-template-columns (str "repeat(" limit ", 1fr)")}} {:style {:grid-template-columns (dm/str "repeat(" limit ", 1fr)")}}
(when dragging? (when dragging?
[:div.grid-item]) [:div.grid-item])
(for [item (take limit files)] (for [item (take limit files)]
@ -396,8 +417,8 @@
selected-project (mf/deref refs/dashboard-selected-project) selected-project (mf/deref refs/dashboard-selected-project)
on-finish-import on-finish-import
(mf/use-callback (mf/use-fn
(mf/deps (:id team)) (mf/deps team-id)
(fn [] (fn []
(st/emit! (dd/fetch-recent-files (:id team)) (st/emit! (dd/fetch-recent-files (:id team))
(dd/clear-selected-files)))) (dd/clear-selected-files))))
@ -405,7 +426,7 @@
import-files (use-import-file project-id on-finish-import) import-files (use-import-file project-id on-finish-import)
on-drag-enter on-drag-enter
(mf/use-callback (mf/use-fn
(mf/deps selected-project) (mf/deps selected-project)
(fn [e] (fn [e]
(when (dnd/has-type? e "penpot/files") (when (dnd/has-type? e "penpot/files")
@ -421,7 +442,7 @@
(reset! dragging? true)))) (reset! dragging? true))))
on-drag-over on-drag-over
(mf/use-callback (mf/use-fn
(fn [e] (fn [e]
(when (or (dnd/has-type? e "penpot/files") (when (or (dnd/has-type? e "penpot/files")
(dnd/has-type? e "Files") (dnd/has-type? e "Files")
@ -429,19 +450,19 @@
(dom/prevent-default e)))) (dom/prevent-default e))))
on-drag-leave on-drag-leave
(mf/use-callback (mf/use-fn
(fn [e] (fn [e]
(when-not (dnd/from-child? e) (when-not (dnd/from-child? e)
(reset! dragging? false)))) (reset! dragging? false))))
on-drop-success on-drop-success
(fn [] (fn []
(st/emit! (dm/success (tr "dashboard.success-move-file")) (st/emit! (msg/success (tr "dashboard.success-move-file"))
(dd/fetch-recent-files (:id team)) (dd/fetch-recent-files (:id team))
(dd/clear-selected-files))) (dd/clear-selected-files)))
on-drop on-drop
(mf/use-callback (mf/use-fn
(mf/deps files selected-files) (mf/deps files selected-files)
(fn [e] (fn [e]
(when (or (dnd/has-type? e "Files") (when (or (dnd/has-type? e "Files")

210
frontend/src/app/main/ui/dashboard/projects.cljs
View file

@ -6,10 +6,11 @@
(ns app.main.ui.dashboard.projects (ns app.main.ui.dashboard.projects
(:require (:require
[app.common.data :as d]
[app.common.math :as mth] [app.common.math :as mth]
[app.main.data.dashboard :as dd] [app.main.data.dashboard :as dd]
[app.main.data.events :as ev] [app.main.data.events :as ev]
[app.main.data.messages :as dm] [app.main.data.messages :as msg]
[app.main.data.modal :as modal] [app.main.data.modal :as modal]
[app.main.data.users :as du] [app.main.data.users :as du]
[app.main.refs :as refs] [app.main.refs :as refs]
@ -43,8 +44,15 @@
(mf/defc team-hero (mf/defc team-hero
{::mf/wrap [mf/memo]} {::mf/wrap [mf/memo]}
[{:keys [team close-banner] :as props}] [{:keys [team close-banner] :as props}]
(let [go-members #(st/emit! (dd/go-to-team-members)) (let [go-members (mf/use-fn #(st/emit! (dd/go-to-team-members)))
invite-member #(st/emit! (modal/show {:type :invite-members :team team :origin :hero}))]
invite-member
(mf/use-fn
(mf/deps team)
(fn []
(st/emit! (modal/show {:type :invite-members
:team team
:origin :hero}))))]
[:div.team-hero [:div.team-hero
[:img {:src "images/deco-team-banner.png" :border "0"}] [:img {:src "images/deco-team-banner.png" :border "0"}]
[:div.text [:div.text
@ -52,7 +60,9 @@
[:div.info [:div.info
[:span (tr "dasboard.team-hero.text")] [:span (tr "dasboard.team-hero.text")]
[:a {:on-click go-members} (tr "dasboard.team-hero.management")]]] [:a {:on-click go-members} (tr "dasboard.team-hero.management")]]]
[:button.btn-primary.invite {:on-click invite-member} (tr "onboarding.choice.team-up.invite-members")] [:button.btn-primary.invite
{:on-click invite-member}
(tr "onboarding.choice.team-up.invite-members")]
[:button.close {:on-click close-banner} [:button.close {:on-click close-banner}
[:span i/close]]])) [:span i/close]]]))
@ -61,46 +71,47 @@
(mf/defc tutorial-project (mf/defc tutorial-project
[{:keys [close-tutorial default-project-id] :as props}] [{:keys [close-tutorial default-project-id] :as props}]
(let [state (mf/use-state (let [state (mf/use-state {:status :waiting
{:status :waiting :file nil})
:file nil})
template (->> (mf/deref builtin-templates) templates (mf/deref builtin-templates)
(filter #(= (:id %) "tutorial-for-beginners")) template (d/seek #(= (:id %) "tutorial-for-beginners") templates)
first)
on-template-cloned-success on-template-cloned-success
(mf/use-callback (mf/use-fn
(mf/deps default-project-id)
(fn [response] (fn [response]
(swap! state #(assoc % :status :success :file (:first response))) (swap! state #(assoc % :status :success :file (:first response)))
(st/emit! (dd/go-to-workspace {:id (first response) :project-id default-project-id :name "tutorial"}) (st/emit! (dd/go-to-workspace {:id (first response) :project-id default-project-id :name "tutorial"})
(du/update-profile-props {:viewed-tutorial? true})))) (du/update-profile-props {:viewed-tutorial? true}))))
on-template-cloned-error on-template-cloned-error
(fn [] (mf/use-fn
(swap! state #(assoc % :status :waiting)) (fn []
(st/emit! (swap! state #(assoc % :status :waiting))
(dm/error (tr "dashboard.libraries-and-templates.import-error")))) (st/emit!
(msg/error (tr "dashboard.libraries-and-templates.import-error")))))
download-tutorial download-tutorial
(fn [] (mf/use-fn
(let [mdata {:on-success on-template-cloned-success :on-error on-template-cloned-error} (mf/deps template default-project-id)
params {:project-id default-project-id :template-id (:id template)}] (fn []
(swap! state #(assoc % :status :importing)) (let [mdata {:on-success on-template-cloned-success :on-error on-template-cloned-error}
(st/emit! (with-meta (dd/clone-template (with-meta params mdata)) params {:project-id default-project-id :template-id (:id template)}]
{::ev/origin "get-started-hero-block"}))))] (swap! state #(assoc % :status :importing))
(st/emit! (with-meta (dd/clone-template (with-meta params mdata))
{::ev/origin "get-started-hero-block"})))))]
[:div.tutorial [:div.tutorial
[:div.img] [:div.img]
[:div.text [:div.text
[:div.title (tr "dasboard.tutorial-hero.title")] [:div.title (tr "dasboard.tutorial-hero.title")]
[:div.info (tr "dasboard.tutorial-hero.info")] [:div.info (tr "dasboard.tutorial-hero.info")]
[:button.btn-primary.action {:on-click download-tutorial} [:button.btn-primary.action {:on-click download-tutorial}
(case (:status @state) (case (:status @state)
:waiting (tr "dasboard.tutorial-hero.start") :waiting (tr "dasboard.tutorial-hero.start")
:importing [:span.loader i/loader-pencil] :importing [:span.loader i/loader-pencil]
:success "" :success "")]]
)
]]
[:button.close [:button.close
{:on-click close-tutorial} {:on-click close-tutorial}
[:span.icon i/close]]])) [:span.icon i/close]]]))
@ -128,32 +139,32 @@
[{:keys [project first? team files] :as props}] [{:keys [project first? team files] :as props}]
(let [locale (mf/deref i18n/locale) (let [locale (mf/deref i18n/locale)
file-count (or (:count project) 0) file-count (or (:count project) 0)
project-id (:id project)
dstate (mf/deref refs/dashboard-local) dstate (mf/deref refs/dashboard-local)
edit-id (:project-for-edit dstate) edit-id (:project-for-edit dstate)
local local (mf/use-state {:menu-open false
(mf/use-state {:menu-open false :menu-pos nil
:menu-pos nil :edition? (= (:id project) edit-id)})
:edition? (= (:id project) edit-id)})
width (mf/use-state nil)
rowref (mf/use-ref)
itemsize (if (>= @width 1030)
280
230)
ratio (if (some? @width) (/ @width itemsize) 0)
nitems (mth/floor ratio)
limit (min 10 nitems)
limit (max 1 limit)
on-nav on-nav
(mf/use-callback (mf/use-fn
(mf/deps project) (mf/deps project)
#(st/emit! (rt/nav :dashboard-files {:team-id (:team-id project) (fn []
:project-id (:id project)}))) (st/emit! (rt/nav :dashboard-files {:team-id (:team-id project)
:project-id project-id}))))
width (mf/use-state nil)
rowref (mf/use-ref)
itemsize (if (>= @width 1030)
280
230)
ratio (if (some? @width) (/ @width itemsize) 0)
nitems (mth/floor ratio)
limit (min 10 nitems)
limit (max 1 limit)
toggle-pin toggle-pin
(mf/use-callback (mf/use-callback
(mf/deps project) (mf/deps project)
@ -209,22 +220,24 @@
(dd/fetch-recent-files (:id team)) (dd/fetch-recent-files (:id team))
(dd/clear-selected-files))))] (dd/clear-selected-files))))]
(mf/use-effect (mf/with-effect
(fn [] (let [node (mf/ref-val rowref)
(let [node (mf/ref-val rowref) mnt? (volatile! true)
mnt? (volatile! true) sub (->> (wapi/observe-resize node)
sub (->> (wapi/observe-resize node) (rx/observe-on :af)
(rx/observe-on :af) (rx/subs (fn [entries]
(rx/subs (fn [entries] (let [row (first entries)
(let [row (first entries) row-rect (.-contentRect ^js row)
row-rect (.-contentRect ^js row) row-width (.-width ^js row-rect)]
row-width (.-width ^js row-rect)] (when @mnt?
(when @mnt? (reset! width row-width))))))]
(reset! width row-width))))))] (fn []
(fn [] (vreset! mnt? false)
(vreset! mnt? false) (rx/dispose! sub))))
(rx/dispose! sub)))))
[:div.dashboard-project-row {:class (when first? "first")}
[:div.dashboard-project-row
{:class (when first? "first")}
[:div.project {:ref rowref} [:div.project {:ref rowref}
[:div.project-name-wrapper [:div.project-name-wrapper
(if (:edition? @local) (if (:edition? @local)
@ -265,6 +278,7 @@
[:a.btn-secondary.btn-small.tooltip.tooltip-bottom [:a.btn-secondary.btn-small.tooltip.tooltip-bottom
{:on-click on-menu-click :alt (tr "dashboard.options") :data-test "project-options"} {:on-click on-menu-click :alt (tr "dashboard.options") :data-test "project-options"}
i/actions]]] i/actions]]]
(when (and (> limit 0) (when (and (> limit 0)
(> file-count limit)) (> file-count limit))
[:div.show-more {:on-click on-nav} [:div.show-more {:on-click on-nav}
@ -290,53 +304,53 @@
(reverse)) (reverse))
recent-map (mf/deref recent-files-ref) recent-map (mf/deref recent-files-ref)
props (some-> profile (get :props {})) props (some-> profile (get :props {}))
team-hero? (:team-hero? props true) team-hero? (and (:team-hero? props true)
(not (:is-default team)))
tutorial-viewed? (:viewed-tutorial? props true) tutorial-viewed? (:viewed-tutorial? props true)
walkthrough-viewed? (:viewed-walkthrough? props true) walkthrough-viewed? (:viewed-walkthrough? props true)
close-banner (fn [] team-id (:id team)
(st/emit!
(du/update-profile-props {:team-hero? false})
(ptk/event ::ev/event {::ev/name "dont-show-team-up-hero"
::ev/origin "dashboard"})))
close-tutorial (fn [] close-banner
(st/emit! (mf/use-fn
(du/update-profile-props {:viewed-tutorial? true}) (fn []
(ptk/event ::ev/event {::ev/name "dont-show" (st/emit! (du/update-profile-props {:team-hero? false})
::ev/origin "get-started-hero-block" (ptk/event ::ev/event {::ev/name "dont-show-team-up-hero"
:type "tutorial" ::ev/origin "dashboard"}))))
:section "dashboard"}))) close-tutorial
(mf/use-fn
(fn []
(st/emit! (du/update-profile-props {:viewed-tutorial? true})
(ptk/event ::ev/event {::ev/name "dont-show"
::ev/origin "get-started-hero-block"
:type "tutorial"
:section "dashboard"}))))
close-walkthrough
(mf/use-fn
(fn []
(st/emit! (du/update-profile-props {:viewed-walkthrough? true})
(ptk/event ::ev/event {::ev/name "dont-show"
::ev/origin "get-started-hero-block"
:type "walkthrough"
:section "dashboard"}))))]
close-walkthrough (fn [] (mf/with-effect [team]
(st/emit! (let [tname (if (:is-default team)
(du/update-profile-props {:viewed-walkthrough? true}) (tr "dashboard.your-penpot")
(ptk/event ::ev/event {::ev/name "dont-show" (:name team))]
::ev/origin "get-started-hero-block" (dom/set-html-title (tr "title.dashboard.projects" tname))))
:type "walkthrough"
:section "dashboard"})))]
(mf/use-effect (mf/with-effect [team-id]
(mf/deps team) (st/emit! (dd/fetch-recent-files team-id)
(fn [] (dd/clear-selected-files)))
(let [tname (if (:is-default team)
(tr "dashboard.your-penpot")
(:name team))]
(dom/set-html-title (tr "title.dashboard.projects" tname)))))
(mf/use-effect
(mf/deps (:id team))
(fn []
(st/emit! (dd/fetch-recent-files (:id team))
(dd/clear-selected-files))))
(when (seq projects) (when (seq projects)
[:* [:*
[:& header] [:& header]
(when (and team-hero? (not (:is-default team)))
[:& team-hero (when team-hero?
{:team team [:& team-hero {:team team :close-banner close-banner}])
:close-banner close-banner}])
(when (or (not tutorial-viewed?) (not walkthrough-viewed?)) (when (or (not tutorial-viewed?) (not walkthrough-viewed?))
[:div.hero-projects [:div.hero-projects
(when (and (not tutorial-viewed?) (:is-default team)) (when (and (not tutorial-viewed?) (:is-default team))
@ -358,5 +372,5 @@
:team team :team team
:files files :files files
:first? (= project (first projects)) :first? (= project (first projects))
:key (:id project)}]))]]))) :key id}]))]])))

38
frontend/src/app/main/ui/hooks.cljs
View file

@ -29,7 +29,7 @@
(defn use-rxsub (defn use-rxsub
[ob] [ob]
(let [[state reset-state!] (mf/useState @ob)] (let [[state reset-state!] (mf/useState #(if (satisfies? IDeref ob) @ob nil))]
(mf/useEffect (mf/useEffect
(fn [] (fn []
(let [sub (rx/subscribe ob #(reset-state! %))] (let [sub (rx/subscribe ob #(reset-state! %))]
@ -313,3 +313,39 @@
(use-stream stream (partial reset! state)) (use-stream stream (partial reset! state))
state)) state))
(defonce ^:private intersection-subject (rx/subject))
(defonce ^:private intersection-observer
(delay (js/IntersectionObserver.
(fn [entries _]
(run! (partial rx/push! intersection-subject) (seq entries)))
#js {:rootMargin "0px"
:threshold 1.0})))
(defn use-visible
[ref & {:keys [once?]}]
(let [[state update-state!] (mf/useState false)]
(mf/with-effect [once?]
(let [node (mf/ref-val ref)
stream (->> intersection-subject
(rx/filter (fn [entry]
(let [target (unchecked-get entry "target")]
(identical? target node))))
(rx/map (fn [entry]
(let [ratio (unchecked-get entry "intersectionRatio")
intersecting? (unchecked-get entry "isIntersecting")]
(or intersecting? (> ratio 0.5)))))
(rx/dedupe))
stream (if once?
(->> stream
(rx/filter identity)
(rx/take 1))
stream)
subs (rx/subscribe stream update-state!)]
(.observe ^js @intersection-observer node)
(fn []
(.unobserve ^js @intersection-observer node)
(rx/dispose! subs))))
state))

12
frontend/src/app/util/perf.cljs
View file

@ -131,3 +131,15 @@
(js/performance.clearMeasures end-mark) (js/performance.clearMeasures end-mark)
#js {:duration duration #js {:duration duration
:avg avg}))) :avg avg})))
(defn now
[]
(js/performance.now))
(defn tpoint
"Create a measurement checkpoint for time measurement of potentially
asynchronous flow."
[]
(let [p1 (now)]
#(js/Math.floor (- (now) p1))))