hj/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

make useVirtualScrolling agnostic

Browse source
This commit is contained in:
Henry Jameson 2026-09-10 16:15:19 +03:00
commit 56c4c29bd7
3 changed files with 120 additions and 122 deletions
Download patch file Download diff file Expand all files Collapse all files

57
src/components/conversation/conversation.js
View file

@ -187,6 +187,27 @@ export default {
'-last': status.id === lastStatus.value?.id,
})
// 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(() => 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')
@ -197,13 +218,14 @@ export default {
heightChart: heightChartLinear,
changeSuspendState: changeSuspendStateLinear,
updateVirtualHeight: updateVirtualHeightLinear,
} = useVirtualScrolling(
conversation,
linearElement,
scroller,
linearScrollCompensation,
currentStatus,
)
} = useVirtualScrolling({
list: conversation,
body: linearElement,
scrollPositionInstance: scroller,
scrollCompensation: linearScrollCompensation,
anchorId: currentStatus.id,
getPlaceholderHeight,
})
// # Tree style stuff
const isTreeView = computed(() => displayStyle.value === 'tree')
@ -224,12 +246,13 @@ export default {
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 +260,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,

22
src/components/conversation/conversation.vue
View file

@ -99,17 +99,17 @@
<Status
v-if="element.type === 'status'"
class="conversation-status panel-body"
:class="getStatusClasses(element.status)"
:class="getStatusClasses(element.item)"
:status-id="element.status.id"
:replies="getReplies(element.status.id)"
:status-id="element.item.id"
:replies="getReplies(element.item.id)"
:focused="focused === element.status.id"
:focused="focused === element.item.id"
conversation-rank="ancestor"
:data-status-id="element.id"
@goto="setFocused"
@dive="diveIntoStatus(element.status.id)"
@dive="diveIntoStatus(element.item.id)"
@suspendable-state-change="changeSuspendStateAncestors"
@height-change="updateVirtualHeightAncestors"
/>
@ -128,7 +128,7 @@
<!-- it's more convenient for us to use a v-for here -->
<template v-for="element in heightChartCurrentLevel">
<ThreadTree
v-if="element.type === 'status'"
v-if="element.type === 'item'"
:status-id="currentStatus.id"
:depth="0"
@ -158,13 +158,13 @@
:key="element.id ?? element.ids"
>
<Status
v-if="element.type === 'status'"
v-if="element.type === 'item'"
class="conversation-status"
:class="getStatusClasses(element.status)"
:status-id="element.status.id"
:replies="getReplies(element.status.id)"
:class="getStatusClasses(element.item)"
:status-id="element.item.id"
:replies="getReplies(element.item.id)"
:focused="focused === element.id || focused === element.status.retweeted_status?.id"
:focused="focused === element.id || focused === element.item.retweeted_status?.id"
:data-status-id="element.id"
@goto="setFocused"

163
src/composables/useVirtualScrolling.js
View file

@ -1,23 +1,15 @@
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 { useWindowSize } from 'src/composables/useWindowSize.js'
export function useVirtualScrolling(
conversation,
export function useVirtualScrolling({
list,
body,
scrollPosition,
scrollPositionInstance,
scrollCompensation,
anchorStatus,
) {
const getStatusObject = (id) => useStatusesStore().allStatuses.get(id)
const { mergedConfig } = storeToRefs(useMergedConfigStore())
const anchor = computed(() => anchorStatus?.value.id)
anchorId,
getPlaceholderHeight,
}) {
const unsuspendibleIds = ref(new Set())
const changeSuspendState = ({ id, suspend }) => {
if (!suspend) {
@ -27,97 +19,25 @@ 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)
// Add buffer zone to boundary, equal to approx 3 items heights
const buffer = computed(() => getPlaceholderHeight().value * 3)
// Heights map.
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
@ -129,14 +49,18 @@ export function useVirtualScrolling(
return chart
})
// Scroll compensation
watch(heightChart, async (newVal, oldVal) => {
if (!toValue(scrollCompensation)) return
if (scrollInProgress.value) 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)
anchorId?.value
? list.find(({ id }) => id === anchorId?.value)
: list[list.length - 1]
const oldElement = getAnchoredEl(oldVal)
const newElement = getAnchoredEl(newVal)
const oldOffset = oldElement?.top ?? 0
@ -153,6 +77,51 @@ export function useVirtualScrolling(
updateBoundaries()
resumeWatchers()
})
const updateVirtualHeight = ({ id, height }) => {
heights.value.set(id, height)
}
// Scrolling
const {
y: scrollY,
inProgress: scrollInProgress,
scrollBy,
} = scrollPositionInstance
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
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 = () => {
windowWatcher.resume()
scrollWatcher.resume()
heightWatcher.resume()
bodyWatcher.resume()
}
const heightChartGrouped = computed(() => {
// Determine visibility state
@ -176,13 +145,13 @@ 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
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 {
const previousItem = acc[acc.length - 1]
const spacer =