Skip to content

Commit

Permalink
fix: incremental expand/collapse
Browse files Browse the repository at this point in the history
  • Loading branch information
@tiensonqin
tiensonqin committed Feb 9, 2022
1 parent fe3f066 commit e9e763f
Show file tree
Hide file tree
Showing 8 changed files with 170 additions and 191 deletions.
40 changes: 28 additions & 12 deletions src/main/frontend/components/block.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1418,7 +1418,6 @@
has-children-blocks?)
control-show? (util/react *control-show?)
ref? (:ref? config)
block? (:block? config)
empty-content? (block-content-empty? block)]
[:div.mr-1.flex.flex-row.items-center.sm:mr-2
{:style {:height 24
Expand All @@ -1430,7 +1429,7 @@
:on-click (fn [event]
(util/stop event)
(when-not (and (not collapsed?) (not has-child?))
(if (or ref? block?)
(if ref?
(state/toggle-collapsed-block! uuid)
(if collapsed?
(editor-handler/expand-block! uuid)
Expand Down Expand Up @@ -2170,13 +2169,27 @@
children)
(distinct @refs)))

(defn- root-block?
[config block]
(and (:block? config)
(util/collapsed? block)
(= (:id config)
(str (:block/uuid block)))))

(rum/defcs block-container < rum/reactive
{:init (fn [state]
(let [[config block] (:rum/args state)]
(when (and (nil? (state/get-collapsed (:block/uuid block)))
(or (:ref? config) (:block? config)))
(state/set-collapsed-block! (:block/uuid block)
(editor-handler/block-default-collapsed? block config)))
(let [[config block] (:rum/args state)
block-id (:block/uuid block)]
(cond
(:ref? config)
(state/set-collapsed-block! block-id
(editor-handler/block-default-collapsed? block config))

(root-block? config block)
(state/set-collapsed-block! block-id false)

:else
nil)
(assoc state ::control-show? (atom false))))
:should-update (fn [old-state new-state]
(let [compare-keys [:block/uuid :block/content :block/parent :block/collapsed? :block/children
Expand All @@ -2201,11 +2214,14 @@
config)
heading? (and (= type :heading) heading-level (<= heading-level 6))
*control-show? (get state ::control-show?)
ref? (boolean (:ref? config))
block? (boolean (:block? config))
collapsed? (if (or ref? block?)
ref? (:ref? config)
db-collapsed? (util/collapsed? block)
collapsed? (cond
(or ref? (root-block? config block))
(state/sub-collapsed uuid)
(util/collapsed? block))

:else
db-collapsed?)
breadcrumb-show? (:breadcrumb-show? config)
slide? (boolean (:slide? config))
custom-query? (boolean (:custom-query? config))
Expand Down Expand Up @@ -2858,7 +2874,7 @@


(defn- get-segment
[config flat-blocks idx blocks->vec-tree]
[_config flat-blocks idx blocks->vec-tree]
(let [new-idx (if (< idx block-handler/initial-blocks-length)
block-handler/initial-blocks-length
(+ idx block-handler/step-loading-blocks))
Expand Down
152 changes: 74 additions & 78 deletions src/main/frontend/components/page.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@
(if block-id
(when-let [root-block (db/pull [:block/uuid block-id])]
(let [blocks (-> (db/get-block-and-children repo block-id)
(model/sort-blocks root-block {:block? true}))]
(model/sort-blocks root-block {}))]
(cons root-block blocks)))
(db/get-page-blocks repo page-name))))

Expand All @@ -65,11 +65,7 @@
state)

(rum/defc page-blocks-inner <
{:init (fn [state]
(when-let [block-id (last (:rum/args state))]
(state/set-collapsed-block! block-id false))
state)
:did-mount open-first-block!
{:did-mount open-first-block!
:did-update open-first-block!}
[page-name _blocks hiccup sidebar? _block-uuid]
[:div.page-blocks-inner {:style {:margin-left (if sidebar? 0 -20)}}
Expand Down Expand Up @@ -259,78 +255,78 @@
(db/get-page-format page))
journal? (db/journal-page? page-name)
fmt-journal? (boolean (date/journal-title->int page-name))
sidebar? (:sidebar? option)]
(let [route-page-name path-page-name
page (if block?
(->> (:db/id (:block/page (db/entity repo [:block/uuid block-id])))
(db/entity repo))
(do
(when-not (db/entity repo [:block/name page-name])
(let [m (format-block/page-name->map path-page-name true)]
(db/transact! repo [m])))
(db/pull [:block/name page-name])))
{:keys [icon]} (:block/properties page)
page-name (:block/name page)
page-original-name (:block/original-name page)
title (or page-original-name page-name)
icon (or icon "")
today? (and
journal?
(= page-name (util/page-name-sanity-lc (date/journal-name))))]
[:div.flex-1.page.relative
(merge (if (seq (:block/tags page))
(let [page-names (model/get-page-names-by-ids (map :db/id (:block/tags page)))]
{:data-page-tags (text/build-data-value page-names)})
{})

{:key path-page-name
:class (util/classnames [{:is-journals (or journal? fmt-journal?)}])})

[:div.relative
(when (and (not sidebar?)
(not block?))
[:div.flex.flex-row.space-between
[:div.flex-1.flex-row
(page-title page-name icon title format fmt-journal?)]
(when (not config/publishing?)
[:div.flex.flex-row
(when plugin-handler/lsp-enabled?
(plugins/hook-ui-slot :page-head-actions-slotted nil)
(plugins/hook-ui-items :pagebar))])])
[:div
(when (and block? (not sidebar?))
(let [config {:id "block-parent"
:block? true}]
[:div.mb-4
(block/block-parents config repo block-id {:level-limit 3})]))

;; blocks
(let [page (if block?
(db/entity repo [:block/uuid block-id])
page)]
(page-blocks-cp repo page {:sidebar? sidebar?}))]]

(when-not block?
(today-queries repo today? sidebar?))

(when-not block?
(tagged-pages repo page-name))

;; referenced blocks
[:div {:key "page-references"}
(rum/with-key
(reference/references route-page-name false)
(str route-page-name "-refs"))]

(when-not block?
[:div
(when (not journal?)
(hierarchy/structures route-page-name))

;; TODO: or we can lazy load them
(when-not sidebar?
[:div {:key "page-unlinked-references"}
(reference/unlinked-references route-page-name)])])]))))
sidebar? (:sidebar? option)
route-page-name path-page-name
page (if block?
(->> (:db/id (:block/page (db/entity repo [:block/uuid block-id])))
(db/entity repo))
(do
(when-not (db/entity repo [:block/name page-name])
(let [m (format-block/page-name->map path-page-name true)]
(db/transact! repo [m])))
(db/pull [:block/name page-name])))
{:keys [icon]} (:block/properties page)
page-name (:block/name page)
page-original-name (:block/original-name page)
title (or page-original-name page-name)
icon (or icon "")
today? (and
journal?
(= page-name (util/page-name-sanity-lc (date/journal-name))))]
[:div.flex-1.page.relative
(merge (if (seq (:block/tags page))
(let [page-names (model/get-page-names-by-ids (map :db/id (:block/tags page)))]
{:data-page-tags (text/build-data-value page-names)})
{})

{:key path-page-name
:class (util/classnames [{:is-journals (or journal? fmt-journal?)}])})

[:div.relative
(when (and (not sidebar?)
(not block?))
[:div.flex.flex-row.space-between
[:div.flex-1.flex-row
(page-title page-name icon title format fmt-journal?)]
(when (not config/publishing?)
[:div.flex.flex-row
(when plugin-handler/lsp-enabled?
(plugins/hook-ui-slot :page-head-actions-slotted nil)
(plugins/hook-ui-items :pagebar))])])
[:div
(when (and block? (not sidebar?))
(let [config {:id "block-parent"
:block? true}]
[:div.mb-4
(block/block-parents config repo block-id {:level-limit 3})]))

;; blocks
(let [page (if block?
(db/entity repo [:block/uuid block-id])
page)]
(page-blocks-cp repo page {:sidebar? sidebar?}))]]

(when-not block?
(today-queries repo today? sidebar?))

(when-not block?
(tagged-pages repo page-name))

;; referenced blocks
[:div {:key "page-references"}
(rum/with-key
(reference/references route-page-name false)
(str route-page-name "-refs"))]

(when-not block?
[:div
(when (not journal?)
(hierarchy/structures route-page-name))

;; TODO: or we can lazy load them
(when-not sidebar?
[:div {:key "page-unlinked-references"}
(reference/unlinked-references route-page-name)])])])))

(defonce layout (atom [js/window.innerWidth js/window.innerHeight]))

Expand Down
1 change: 0 additions & 1 deletion src/main/frontend/components/page_menu.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@
[frontend.state :as state]
[frontend.ui :as ui]
[frontend.util :as util]
[rum.core :as rum]
[frontend.handler.shell :as shell]
[frontend.handler.plugin :as plugin-handler]
[frontend.mobile.util :as mobile-util]))
Expand Down
1 change: 0 additions & 1 deletion src/main/frontend/context/i18n.cljs
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
(ns frontend.context.i18n
(:require [frontend.dicts :as dicts]
[frontend.modules.shortcut.dict :as shortcut-dict]
[rum.core :as rum]
[medley.core :refer [deep-merge]]
[frontend.state :as state]))

Expand Down
12 changes: 3 additions & 9 deletions src/main/frontend/db/model.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -420,14 +420,13 @@
;; TODO: both zipmap and map lookup are slow in cljs
;; zipmap 20k blocks takes 30ms on my M1 Air.
(defn sort-blocks
[blocks parent {:keys [limit block?] :as config}]
[blocks parent {:keys [limit] :as config}]
(let [ids->blocks (zipmap (map
(fn [b]
[(:db/id (:block/parent b))
(:db/id (:block/left b))])
blocks)
blocks)
collapsed-blocks (if block? (state/sub-collapsed-blocks) nil)]
blocks)]
(loop [node parent
next-siblings '()
result []]
Expand All @@ -439,12 +438,7 @@
next-siblings (if (and next-sibling child-block)
(cons next-sibling next-siblings)
next-siblings)
collapsed? (if block?
(let [v (get collapsed-blocks (:block/uuid node))]
(if (some? v)
v
(:block/collapsed? node)))
(:block/collapsed? node))]
collapsed? (:block/collapsed? node)]
(if-let [node (and
(or (not collapsed?)
(= (:db/id node) (:db/id parent)))
Expand Down
Loading

0 comments on commit e9e763f

Please sign in to comment.