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

i really don't want to keep on working on scroll forever

Browse source
This commit is contained in:
Henry Jameson 2026-09-15 00:59:21 +03:00
commit 05824010ed
4 changed files with 116 additions and 103 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -116,6 +116,7 @@ export default {
fetchConversation,
loadError,
} = useConversation(statusId, isExpanded)
const conversationLite = computed(() => conversation.value.map(({ id }) => ({ id })))
watch(
expanded,
@ -137,10 +138,10 @@ export default {
const lastStatus = computed(
() => conversation.value[conversation.value.legnth - 1],
)
const getStatusClasses = (status, ancestor) => {
const getStatusClasses = (statusId, ancestor) => {
const result = {
'-first': status.id === firstStatus.value?.id,
'-last': status.id === lastStatus.value?.id,
'-first': statusId === firstStatus.value?.id,
'-last': statusId === lastStatus.value?.id,
}
if (ancestor) {
result['-ancestor'] = true
@ -191,12 +192,15 @@ export default {
heightChart: heightChartLinear,
changeSuspendState: changeSuspendStateLinear,
updateVirtualHeight: updateVirtualHeightLinear,
reset: resetLinearScrollVirtualization,
} = useVirtualScrolling({
list: conversation,
context: statusId,
list: conversationLite,
body: linearElement,
scrollPositionInstance: scroller,
scrollCompensation: linearScrollCompensation,
anchorIds,
collapseMode: 'item',
getPlaceholderHeight,
})
const changeSuspendStateLinearLocal = (e) => {
@ -227,14 +231,17 @@ export default {
{ flush: 'post' },
)
const currentAncestorsLite = computed(() => currentAncestors.value.map(({ id }) => ({ id })))
const ancestorsElement = useTemplateRef('ancestors')
const treeScrollCompensation = computed(() => isTreeView.value)
const {
heightChart: heightChartAncestors,
changeSuspendState: changeSuspendStateAncestors,
updateVirtualHeight: updateVirtualHeightAncestors,
reset: resetTreeScrollVirtualization,
} = useVirtualScrolling({
list: currentAncestors,
context: statusId,
list: currentAncestorsLite,
body: ancestorsElement,
scrollPositionInstance: scroller,
scrollCompensation: treeScrollCompensation,
@ -260,6 +267,11 @@ export default {
}
}
watch(statusId, (neu, old) => {
resetLinearScrollVirtualization()
resetTreeScrollVirtualization()
})
const treeViewIsSimple = computed(
() => !mergedConfig.value.conversationTreeAdvanced,
)

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

@ -98,19 +98,19 @@
<Status
v-if="element.type === 'item'"
class="conversation-status panel-body"
:class="getStatusClasses(element.item, true)"
:class="getStatusClasses(element.id, true)"
:status-id="element.item.id"
:replies="getReplies(element.item.id)"
:status-id="element.id"
:replies="getReplies(element.id)"
:focused="focusedId === element.item.id"
:focused="focusedId === element.id"
conversation-rank="ancestor"
:data-status-id="element.id"
:data-vs-height="element.height"
:data-vs-top="element.top"
@goto="setFocused"
@dive="diveIntoStatus(element.item.id)"
@dive="diveIntoStatus(element.id)"
@suspendable-state-change="changeSuspendStateAncestorsLocal"
@height-change="updateVirtualHeightAncestors"
/>
@ -145,11 +145,11 @@
<Status
v-if="element.type === 'item'"
class="panel-body conversation-status"
:class="getStatusClasses(element.item)"
:status-id="element.item.id"
:replies="getReplies(element.item.id)"
:class="getStatusClasses(element.id)"
:status-id="element.id"
:replies="getReplies(element.id)"
:focused="focusedId === element.item.id || focusedId === element.item.retweeted_status?.id"
:focused="focusedId === element.id"
:data-status-id="element.id"
:data-vs-height="element.height"

16
src/composables/useConversation.js
View file

@ -32,24 +32,14 @@ export function useConversation(statusId, expanded) {
const { mainStatus: focusedStatus } = useMainStatus(focusedId)
const setFocused = (id) => {
focusedId.value = id
console.log('SF', id)
}
provide('focusedId', focusedId)
watch(mainStatus, (newStatus, oldStatus) => {
setFocused(newStatus.id)
const newConversationId = newStatus?.statusnet_conversation_id
const oldConversationId = oldStatus?.statusnet_conversation_id
if (
newConversationId &&
oldConversationId &&
newConversationId === oldConversationId
) {
} else {
// resetDisplayState()
// fetchConversation()
}
if (newStatus) setFocused(newStatus.id)
fetchConversation()
})
watch(expanded, (value) => {
setFocused(value ? statusId.value : null)
}, { immediate: true })

163
src/composables/useVirtualScrolling.js
View file

@ -1,4 +1,4 @@
import { last } from 'lodash-es'
import { last, first } from 'lodash-es'
import { computed, nextTick, ref, toValue, watch } from 'vue'
import { useWindowSize } from 'src/composables/useWindowSize.js'
@ -19,6 +19,8 @@ export function useVirtualScrolling({
// How to handle collapse/expansion (going from 0 elements to full and back)
// - false - don't do scroll compensation at all
// - 'height' - compensate scroll according to list's height
// - 'item' - same as height but uses anchor element's top offset
// instead of whole height
collapseMode,
// Anchor. Set of IDs of element relative to which do scroll compensation
anchorIds,
@ -53,7 +55,8 @@ export function useVirtualScrolling({
}
})()
const suspendable = !unsuspendibleIds.value.has(id)
return { id, height, suspendable, item }
const real = heights.value.has(id)
return { id, height, suspendable, real }
})
// Walk over the list to set top offsets
@ -68,59 +71,7 @@ export function useVirtualScrolling({
heights.value.set(id, height)
}
// ## Scroll compensation
const { y: scrollY, scrollBy } = scrollPositionInstance
watch(heightChart, async (newVal, oldVal) => {
if (!toValue(scrollCompensation)) return
if (newVal.length === 0 && oldVal.length === 0) return
pauseWatchers()
const expansion = oldVal.length === 0 && newVal.length !== 0
const collapse = oldVal.length !== 0 && newVal.length === 0
const diff = (() => {
if (expansion || collapse) {
if (toValue(collapseMode) === 'height') {
const oldBottomElement = last(oldVal)
const newBottomElement = last(newVal)
if (expansion) {
return newBottomElement.top + newBottomElement.height
} else if (collapse) {
return 0 - oldBottomElement.top - oldBottomElement.height
}
}
return 0
} else if (toValue(anchorIds) != null) {
const anchorOld = oldVal.find(({ id }) => toValue(anchorIds).has(id))
const anchorNew = newVal.find(({ id }) => toValue(anchorIds).has(id))
if (anchorOld == null) {
throw new Error('Anchor not found!')
}
const disappeared = anchorOld != null && anchorNew == null
if (disappeared) {
throw new Error('Anchor disappeared!')
}
return anchorNew.top - anchorOld.top
} else {
return 0
}
})()
console.log(diff)
if (diff !== 0) {
// Scroll by amount offset changed to keep it in view
topScrollBoundary.value += diff
bottomScrollBoundary.value += diff
await nextTick()
await scrollBy(0, diff)
}
resumeWatchers()
})
const { height: windowHeight } = useWindowSize()
// Real scroll boundary, relative to body's bounds
@ -170,37 +121,91 @@ export function useVirtualScrolling({
() => getPlaceholderHeight().value * (toValue(buffer) ?? 3),
)
const heightChartGrouped = computed(() => {
// Determine visibility state
const chart = heightChart.value.map((heightChartItem) => {
const itemTopBoundary = heightChartItem.top
const itemBottomBoundary = heightChartItem.top + heightChartItem.height
const checkVisible = ({ top, height }) => {
const itemTopBoundary = top
const itemBottomBoundary = top + height
// Include buffer zone
const finalTopScrollBoundary = topScrollBoundary.value - bufferZone.value
const finalBottomScrollBoundary =
bottomScrollBoundary.value + bufferZone.value
// Include buffer zone
const finalTopScrollBoundary = topScrollBoundary.value - bufferZone.value
const finalBottomScrollBoundary = bottomScrollBoundary.value + bufferZone.value
// To be visible, item's bottom boundary shoud be below top scroll boundary)
const isBelowTopBoundary = itemBottomBoundary > finalTopScrollBoundary
// To be visible, item's top boundary shoud be above bottom scroll boundary)
const isAboveBottomBoundary = itemTopBoundary < finalBottomScrollBoundary
// This accounts for the case where item's boundaries exceed scroll boundary
// To be visible, item's bottom boundary shoud be below top scroll boundary)
const isBelowTopBoundary = itemBottomBoundary > finalTopScrollBoundary
// To be visible, item's top boundary shoud be above bottom scroll boundary)
const isAboveBottomBoundary = itemTopBoundary < finalBottomScrollBoundary
// This accounts for the case where item's boundaries exceed scroll boundary
return {
...heightChartItem,
visible: isBelowTopBoundary && isAboveBottomBoundary,
return isBelowTopBoundary && isAboveBottomBoundary
}
const heightChartVisibility = computed(() =>
heightChart.value.map((heightChartItem) => ({
...heightChartItem,
visible: checkVisible(heightChartItem),
}))
)
// ## Scroll compensation
watch(
heightChart,
async (newVal, oldVal) => {
if (!toValue(scrollCompensation)) return
if (newVal.length === 0 && oldVal.length === 0) return
const diff = (() => {
const expansion = oldVal.length === 0 && newVal.length !== 0
const collapse = oldVal.length !== 0 && newVal.length === 0
if (expansion) {
if (toValue(collapseMode) === 'height') {
const newBottomElement = last(newVal)
return newBottomElement.top + newBottomElement.height
} else if (toValue(collapseMode) === 'item') {
const element = newVal.find(({ id }) => toValue(anchorIds).has(id))
return element.top
} else {
return 0
}
} else if (collapse) {
const oldBottomElement = last(oldVal)
return 0 - oldBottomElement.top - oldBottomElement.height
} else {
console.log('COMPENSATE', oldVal, newVal, topScrollBoundary.value)
const oldVisible = oldVal.filter((item) => checkVisible(item))
const oldItem = first(oldVisible)
const oldItemUpdated = newVal.find(({ id }) => id === oldItem.id)
console.log('OLD', oldItem, oldItemUpdated)
if (!oldItemUpdated) return 0 // context change?
return oldItemUpdated.top - oldItem.top - (oldItem.height - oldItemUpdated.height)
}
})()
if (diff !== 0) {
console.log('DIFF', diff)
// Scroll by amount offset changed to keep it in view
topScrollBoundary.value += diff
bottomScrollBoundary.value += diff
await scrollBy(0, diff)
await nextTick()
}
})
resumeWatchers()
},
{ flush: 'post' }
)
const heightChartGrouped = computed(() =>
// Group invisible items into spacers
return chart.reduce((acc, heightChartItem) => {
const { suspendable, visible, height, top, bottom, id, item } =
heightChartVisibility.value.reduce((acc, heightChartItem) => {
const { suspendable, visible, height, top, bottom, id } =
heightChartItem
// Bottom value isn't really used otherwise for debugging
const present = visible || !suspendable
if (present) {
return [...acc, { type: 'item', height, top, bottom, id, item }]
return [...acc, { type: 'item', height, top, bottom, id }]
} else {
// Reusing previous item if possible
const previousItem = acc[acc.length - 1]
@ -232,7 +237,12 @@ export function useVirtualScrolling({
}
}
}, [])
})
)
const reset = async () => {
unsuspendibleIds.value = new Set()
heights.value = new Map()
}
return {
heightChart: heightChartGrouped,
@ -241,5 +251,6 @@ export function useVirtualScrolling({
pauseWatchers,
resumeWatchers,
updateBoundaries,
reset,
}
}