diff --git a/changelog.d/virtual-scrolling-2.change b/changelog.d/virtual-scrolling-2.change
new file mode 100644
index 000000000..74a47c6a9
--- /dev/null
+++ b/changelog.d/virtual-scrolling-2.change
@@ -0,0 +1 @@
+Implemented new virtual scrolling. Opening huge threads should be faster now
diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
index 1fed4c458..863e4f61e 100644
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@@ -19,6 +19,7 @@ import { useConversation } from 'src/composables/useConversation.js'
import { useScrollPosition } from 'src/composables/useScrollPosition.js'
import { useTreeConversationTopology } from 'src/composables/useTreeConversationTopology.js'
import { useVirtualScrolling } from 'src/composables/useVirtualScrolling.js'
+import { useInterfaceSizes } from 'src/composables/useInterfaceSizes.js'
import { WSConnectionStatus } from 'src/api/websocket.js'
@@ -83,7 +84,7 @@ export default {
}
setFocused(id)
const target = document.querySelector(`.Status[data-status-id=${id}]`)
- return await scroller.scrollIntoView(target, { block: 'start' })
+ return await scroller.scrollIntoView(target, { block: 'nearest' })
}
const { statusId } = toRefs(props)
@@ -132,6 +133,7 @@ export default {
// # Main things
const {
currentStatus,
+ mainStatus,
conversation,
replies,
getReplies,
@@ -148,7 +150,6 @@ export default {
resetDisplayState()
}
if (isPage.value) return
- await tryScrollTo(currentStatus.value.id)
},
{ flush: 'post' },
)
@@ -187,23 +188,37 @@ export default {
'-last': status.id === lastStatus.value?.id,
})
+ const { fontSize } = useInterfaceSizes()
+
+ // Placeholder heights.
+ const mutedStatusHeight = computed(() => fontSize.value * 1.5)
+ const normalStatusHeight = computed(() => fontSize.value * 10)
+ const getPlaceholderHeight = (id) =>
+ conversation.value.find((item) => item.id === id)?.muted
+ ? mutedStatusHeight
+ : normalStatusHeight
+
// # Linear style stuff
const isLinearView = computed(() => displayStyle.value !== 'tree')
const linearElement = useTemplateRef('linear')
const linearScrollCompensation = computed(
- () => isLinearView.value && isExpanded.value,
+ () => isLinearView.value,
)
const {
heightChart: heightChartLinear,
changeSuspendState: changeSuspendStateLinear,
updateVirtualHeight: updateVirtualHeightLinear,
- } = useVirtualScrolling(
- conversation,
- linearElement,
- scroller,
- linearScrollCompensation,
- currentStatus,
- )
+ pauseWatchers,
+ resumeWatchers,
+ } = useVirtualScrolling({
+ list: conversation,
+ body: linearElement,
+ scrollPositionInstance: scroller,
+ scrollCompensation: linearScrollCompensation,
+ anchorId: mainStatus.value?.id,
+ anchorRepeatId: currentStatus.value?.id,
+ getPlaceholderHeight,
+ })
// # Tree style stuff
const isTreeView = computed(() => displayStyle.value === 'tree')
@@ -218,18 +233,19 @@ export default {
const ancestorsElement = useTemplateRef('ancestors')
const treeScrollCompensation = computed(
- () => isTreeView.value && isExpanded.value,
+ () => isTreeView.value,
)
const {
heightChart: heightChartAncestors,
changeSuspendState: changeSuspendStateAncestors,
updateVirtualHeight: updateVirtualHeightAncestors,
- } = useVirtualScrolling(
- currentAncestors,
- ancestorsElement,
- scroller,
- treeScrollCompensation,
- )
+ } = useVirtualScrolling({
+ list: currentAncestors,
+ body: ancestorsElement,
+ scrollPositionInstance: scroller,
+ scrollCompensation: treeScrollCompensation,
+ getPlaceholderHeight,
+ })
const currentLevel = computed(() => [currentStatus.value].filter(Boolean))
const currentLevelElement = useTemplateRef('currentLevel')
@@ -237,7 +253,13 @@ export default {
heightChart: heightChartCurrentLevel,
changeSuspendState: changeSuspendStateCurrentLevel,
updateVirtualHeight: updateVirtualHeightCurrentLevel,
- } = useVirtualScrolling(currentLevel, currentLevelElement, scroller, false)
+ } = useVirtualScrolling({
+ list: currentLevel,
+ body: currentLevelElement,
+ scrollPositionInstance: scroller,
+ scrollCompensation: false,
+ getPlaceholderHeight,
+ })
const treeViewIsSimple = computed(
() => !mergedConfig.value.conversationTreeAdvanced,
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 3a61decf5..8d4c4f967 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -97,19 +97,21 @@
:class="{'thread-ancestor-has-other-replies': getReplies(element.id).size > 1, '-faded': shouldFadeAncestors}"
>
@@ -128,7 +130,7 @@
getStatusObject(statusId.value))
+ const mainStatus = computed(() => currentStatus.value?.retweeted_status ?? currentStatus.value)
const sortById = (a, b) => {
const idA = a.type === 'retweet' ? a.retweeted_status.id : a.id
@@ -115,6 +116,7 @@ export function useConversation(statusId, expanded) {
return {
currentStatus,
+ mainStatus,
conversation,
replies,
getReplies,
diff --git a/src/composables/useInterfaceSizes.js b/src/composables/useInterfaceSizes.js
new file mode 100644
index 000000000..43bc79be1
--- /dev/null
+++ b/src/composables/useInterfaceSizes.js
@@ -0,0 +1,43 @@
+import { computed, ref, toValue, watch } from 'vue'
+import { storeToRefs } from 'pinia'
+
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
+
+export function useInterfaceSizes() {
+ const { mergedConfig } = storeToRefs(useMergedConfigStore())
+
+ // Getting the actual font size in pixels since UI might have
+ // a different scale
+ const fontSizeSetting = computed(() => mergedConfig.value.textSize)
+ const fontSize = ref(0)
+ const updateFontSize = () => {
+ const string = window
+ .getComputedStyle(document.body)
+ .getPropertyValue('font-size')
+ fontSize.value = Number.parseInt(string.slice(0, -2), 10) // remove the 'px'
+ }
+ // Update font size if user changed UI scale
+ watch(fontSizeSetting, updateFontSize, { immediate: true })
+
+ const navbarSize = computed(() => {
+ const string = fontSize.value * window
+ .getComputedStyle(document.body)
+ .getPropertyValue('--navbarSize')
+
+ return fontSize.value * Number.parseInt(string.slice(0, -3), 10) // remove the 'rem'
+ })
+
+ const panelHeaderSize = computed(() => {
+ const string = fontSize.value * window
+ .getComputedStyle(document.body)
+ .getPropertyValue('--panelHeaderSize')
+
+ return fontSize.value * Number.parseInt(string.slice(0, -3), 10) // remove the 'rem'
+ })
+
+ return {
+ fontSize,
+ navbarSize,
+ panelHeaderSize,
+ }
+}
diff --git a/src/composables/useScrollPosition.js b/src/composables/useScrollPosition.js
index 6a5e43b18..d32f6a261 100644
--- a/src/composables/useScrollPosition.js
+++ b/src/composables/useScrollPosition.js
@@ -1,5 +1,7 @@
import { onMounted, onUnmounted, ref } from 'vue'
+import { useWindowSize } from 'src/composables/useWindowSize.js'
+
export function useScrollPosition() {
const x = ref(0)
const y = ref(0)
@@ -25,7 +27,20 @@ export function useScrollPosition() {
}
const scrollIntoView = async (element, options) => {
+ if (element == null) throw new TypeError(`Element is ${element}!`)
inProgress.value = true
+ if (!element.scrollIntoViewIfNeeded) {
+ const { height: windowHeight } = useWindowSize()
+ const { top, height } = element.getBoundingClientRect()
+ const bottom = top + height
+
+ const biggerThanScreen = height > windowHeight
+ const aboveTop = top < 0
+ const belowBottom = bottom > windowHeight.value
+ if (aboveTop || belowBottom || biggerThanScreen) {
+ await element.scrollIntoView(options)
+ }
+ }
await element.scrollIntoViewIfNeeded(options)
inProgress.value = false
}
diff --git a/src/composables/useTreeConversationTopology.js b/src/composables/useTreeConversationTopology.js
index b2ce7e23d..6e7e4fb00 100644
--- a/src/composables/useTreeConversationTopology.js
+++ b/src/composables/useTreeConversationTopology.js
@@ -26,7 +26,7 @@ export function useTreeConversationTopology(conversation, replies, current) {
if (!result.has(id)) {
result.set(id, new Set())
}
- if (irid) {
+ if (irid && conversation.value.length !== 1) {
// Setting parent for current item
result.get(id).add(irid)
}
diff --git a/src/composables/useVirtualScrolling.js b/src/composables/useVirtualScrolling.js
index 679f418d9..bb1f11903 100644
--- a/src/composables/useVirtualScrolling.js
+++ b/src/composables/useVirtualScrolling.js
@@ -1,23 +1,28 @@
-import { storeToRefs } from 'pinia'
-import { computed, ref, toValue, watch } from 'vue'
-
-import { useMergedConfigStore } from 'src/stores/merged_config.js'
-import { useStatusesStore } from 'src/stores/statuses.js'
+import { computed, ref, toValue, watch, nextTick } from 'vue'
import { useWindowSize } from 'src/composables/useWindowSize.js'
-export function useVirtualScrolling(
- conversation,
+export function useVirtualScrolling({
+ // List of items
+ list,
+ // Container of items, used for measuring scroll position
body,
- scrollPosition,
+ // useScrollPosition composable, used to prevent dupicating instances
+ scrollPositionInstance,
+ // ID of anchor element, used for scroll compensation.
+ // Omitting it makes last element the anchor
+ anchorId,
+ anchorRepeatId,
+ // whether to use scroll compensation when elements above anchor change
scrollCompensation,
- anchorStatus,
-) {
- const getStatusObject = (id) => useStatusesStore().allStatuses.get(id)
-
- const { mergedConfig } = storeToRefs(useMergedConfigStore())
- const anchor = computed(() => anchorStatus?.value.id)
-
+ // Placeholder height specification. Must be a function.
+ // function will be called either:
+ // - without arguments (for generic placeholder, i.e. buffer zone size)
+ // - with id (for specific item placeholders)
+ // function must return ref pointing to height
+ getPlaceholderHeight,
+}) {
+ // # Suspension
const unsuspendibleIds = ref(new Set())
const changeSuspendState = ({ id, suspend }) => {
if (!suspend) {
@@ -27,97 +32,22 @@ export function useVirtualScrolling(
}
}
- // Getting the actual font size in pixels since UI might have
- // a different scale
- const fontSizeSetting = computed(() => mergedConfig.value.textSize)
- const fontSize = ref(0)
- const updateFontSize = () => {
- const string = window
- .getComputedStyle(document.body)
- .getPropertyValue('font-size')
- fontSize.value = Number.parseInt(string.slice(0, -2), 10) // remove the 'px'
- }
- // Update font size if user changed UI scale
- watch(fontSizeSetting, updateFontSize, { immediate: true })
-
- // Placeholder heights.
- const mutedStatusHeight = computed(() => {
- return fontSize.value * 1.5
- })
- const normalStatusHeight = computed(() => {
- return fontSize.value * 10
- })
-
- // Add buffer zone to boundary, equal to approx 3 statuses heights
- const buffer = computed(() => normalStatusHeight.value * 3)
-
- // Heights map.
+ // # Heights mapping.
const heights = ref(new Map())
- const totalHeight = computed(() =>
- conversation.value.reduce((acc, item) => {
- if (heights.value.has(item.id)) {
- return acc + heights.value.get(item.id)
- } else if (item.muted) {
- return acc + mutedStatusHeight.value
- } else {
- return acc + normalStatusHeight.value
- }
- }, 0),
- )
- const updateVirtualHeight = ({ id, height }) => {
- heights.value.set(id, height)
- }
-
- // Scrolling
- const { y: scrollY, inProgress: scrollInProgress, scrollBy } = scrollPosition
- const { height: windowHeight } = useWindowSize()
-
- const topScrollBoundary = ref(0)
- const bottomScrollBoundary = ref(0)
- const updateBoundaries = () => {
- if (!body.value) return // Not mounted yet
-
- const { top } = body.value.getBoundingClientRect()
-
- const distanceItemTopToWindowTop = 0 - top
- const distanceItemTopToWindowBottom = windowHeight.value - top
-
- topScrollBoundary.value = distanceItemTopToWindowTop
- bottomScrollBoundary.value = distanceItemTopToWindowBottom
- }
- const windowWatcher = watch(windowHeight, updateBoundaries)
- const scrollWatcher = watch(scrollY, updateBoundaries)
- const heightWatcher = watch(totalHeight, updateBoundaries)
- const bodyWatcher = watch(body, updateBoundaries)
- const pauseWatchers = () => {
- windowWatcher.pause()
- scrollWatcher.pause()
- heightWatcher.pause()
- bodyWatcher.pause()
- }
- const resumeWatchers = () => {
- windowWatcher.resume()
- scrollWatcher.resume()
- heightWatcher.resume()
- bodyWatcher.resume()
- }
-
const heightChart = computed(() => {
// Map every height and suspendable state
- const chart = conversation.value.map(({ id }) => {
- const status = getStatusObject(id)
+ const chart = list.value.map((item) => {
+ const { id } = item
const height =
(() => {
if (heights.value.has(id)) {
return heights.value.get(id)
- } else if (status?.muted) {
- return mutedStatusHeight.value
} else {
- return normalStatusHeight.value
+ return getPlaceholderHeight(id).value
}
})() + 1 //including border
const suspendable = !unsuspendibleIds.value.has(id)
- return { id, height, suspendable, status }
+ return { id, height, suspendable, item }
})
// Walk over the list to set top offsets
@@ -128,38 +58,112 @@ export function useVirtualScrolling(
return chart
})
+ const updateVirtualHeight = ({ id, height }) => {
+ heights.value.set(id, height)
+ }
+ // ## Scroll compensation
+ const {
+ y: scrollY,
+ inProgress: scrollInProgress,
+ scrollBy,
+ } = scrollPositionInstance
watch(heightChart, async (newVal, oldVal) => {
if (!toValue(scrollCompensation)) return
- if (scrollInProgress.value) return
+ if (newVal.length === 0 && oldVal.length === 0) return
pauseWatchers()
+
+ // If we're not given an achor, treat last element as one
const getAnchoredEl = (list) =>
- anchor.value
- ? list.find(({ id }) => id === anchor.value)
+ toValue(anchorId)
+ ? list.find(({ id }) => id === toValue(anchorId) || id === toValue(anchorRepeatId))
: list[list.length - 1]
+
const oldElement = getAnchoredEl(oldVal)
const newElement = getAnchoredEl(newVal)
- const oldOffset = oldElement?.top ?? 0
- const newOffset = newElement?.top ?? 0
- const diff = newOffset - oldOffset // Positive = down, Negative = up
+ const diff = (() => {
+ if (oldElement && newElement) {
+ // Generic shifting
+ const oldOffset = toValue(anchorId) ? oldElement.top : (oldElement.top + oldElement.height)
+ const newOffset = toValue(anchorId) ? newElement.top : (newElement.top + newElement.height)
+ return newOffset - oldOffset
+ } else if (!oldElement && newElement) {
+ // Expansion
+ return newElement.top + newElement.height
+ } else if (oldElement && !newElement) {
+ // Collapsing
+ return 0 - oldElement.top - oldElement.height
+ } else {
+ throw new Error("Somehow both new and old elements are missing, this shouldn't happen")
+ }
+ })()
if (diff !== 0) {
+ // Scroll by amount offset changed to keep it in view
topScrollBoundary.value += diff
bottomScrollBoundary.value += diff
- scrollBy(0, diff)
+ await nextTick()
+ await scrollBy(0, diff)
}
- updateBoundaries()
resumeWatchers()
})
+ const { height: windowHeight } = useWindowSize()
+
+ // Real scroll boundary, relative to body's bounds
+ const topScrollBoundary = ref(0)
+ const bottomScrollBoundary = ref(0)
+
+ const updateBoundaries = () => {
+ if (!body.value) return // Not mounted yet
+
+ const { top } = body.value.getBoundingClientRect()
+
+ const distanceItemTopToWindowTop = 0 - top
+ const distanceItemTopToWindowBottom = windowHeight.value - top
+
+ // Technically, bottom scroll boundary should be distance
+ // from element's top border to window's bottom border,
+ // but it just so happens that it is equal to this.
+ // You can verify it by drawing the boxes and measuring
+ // distances yourself, I know I did. Geometry, man...
+ topScrollBoundary.value = distanceItemTopToWindowTop
+ bottomScrollBoundary.value = distanceItemTopToWindowBottom
+ }
+
+ const windowWatcher = watch(windowHeight, updateBoundaries)
+ const scrollWatcher = watch(scrollY, updateBoundaries)
+ const heightWatcher = watch(heightChart, updateBoundaries)
+ const bodyWatcher = watch(body, updateBoundaries)
+
+ const pauseWatchers = () => {
+ windowWatcher.pause()
+ scrollWatcher.pause()
+ heightWatcher.pause()
+ bodyWatcher.pause()
+ }
+ const resumeWatchers = (skipUpdate = false) => {
+ windowWatcher.resume()
+ scrollWatcher.resume()
+ heightWatcher.resume()
+ bodyWatcher.resume()
+ if (skipUpdate) return
+ updateBoundaries()
+ }
+
+ // # Visiblity
+ // Add buffer zone to boundary, equal to approx 3 items heights
+ const buffer = computed(() => getPlaceholderHeight().value * 3)
+
const heightChartGrouped = computed(() => {
// Determine visibility state
const chart = heightChart.value.map((heightChartItem) => {
- const itemBottomBoundary = heightChartItem.top + heightChartItem.height
const itemTopBoundary = heightChartItem.top
+ const itemBottomBoundary = heightChartItem.top + heightChartItem.height
+ // Include buffer zone
const finalTopScrollBoundary = topScrollBoundary.value - buffer.value
const finalBottomScrollBoundary =
bottomScrollBoundary.value + buffer.value
@@ -176,33 +180,39 @@ export function useVirtualScrolling(
}
})
- // Group invisible statuses into spacers
+ // Group invisible items into spacers
return chart.reduce((acc, heightChartItem) => {
- const { suspendable, visible, height, top, bottom, id, status } =
+ const { suspendable, visible, height, top, bottom, id, item } =
heightChartItem
+ // Bottom value isn't really used otherwise for debugging
const present = visible || !suspendable
if (present) {
- return [...acc, { type: 'status', height, top, bottom, id, status }]
+ return [...acc, { type: 'item', height, top, bottom, id, item }]
} else {
+ // Reusing previous item if possible
const previousItem = acc[acc.length - 1]
- const spacer =
- previousItem?.type === 'spacer'
- ? previousItem
- : {
- type: 'spacer',
- top: Number.POSITIVE_INFINITY,
- bottom: Number.POSITIVE_INFINITY,
- height: 0,
- ids: new Set(),
- }
+ const usingPreviousItem = previousItem?.type === 'spacer'
+ // We only really care for height and id of spacer, everything else
+ // is just for debugging
+ const spacer = usingPreviousItem
+ ? previousItem
+ : {
+ type: 'spacer',
+ top: Number.POSITIVE_INFINITY,
+ bottom: Number.POSITIVE_INFINITY,
+ height: 0,
+ ids: new Set(),
+ }
spacer.ids.add(id)
- spacer.id = [...spacer.ids].join()
+ spacer.id = [...spacer.ids].join() // used for v-for key attribute
spacer.height += height
+
if (top < spacer.top) spacer.top = top
if (bottom < spacer.bottom) spacer.bottom = bottom
- if (previousItem?.type === 'spacer') {
+ // If we used previous item there is no need to push it to array
+ if (usingPreviousItem) {
return acc
} else {
return [...acc, spacer]
@@ -215,5 +225,8 @@ export function useVirtualScrolling(
heightChart: heightChartGrouped,
changeSuspendState,
updateVirtualHeight,
+ pauseWatchers,
+ resumeWatchers,
+ updateBoundaries,
}
}