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

Merge branch 'virtual-scrolling-2.0' into shigusegubu-themes3

Browse source
This commit is contained in:
Henry Jameson 2026-09-11 22:39:27 +03:00
commit 12eedeec66
5 changed files with 88 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -192,10 +192,17 @@ export default {
const lastStatus = computed(
() => conversation.value[conversation.value.legnth - 1],
)
const getStatusClasses = (status, active) => ({
'-first': status.id === firstStatus.value?.id,
'-last': status.id === lastStatus.value?.id,
})
const getStatusClasses = (status, ancestor) => {
const result = {
'-first': status.id === firstStatus.value?.id,
'-last': status.id === lastStatus.value?.id,
}
if (ancestor) {
result['-ancestor'] = true
result['-fade'] = mergedConfig.value.conversationTreeFadeAncestors
}
return result
}
const { fontSize } = useInterfaceSizes()
@ -228,6 +235,9 @@ export default {
? mutedStatusHeight
: normalStatusHeight
const anchorIds = computed(
() => new Set([mainStatus.value?.id, currentStatus.value?.id]),
)
// # Linear style stuff
const isLinearView = computed(() => displayStyle.value !== 'tree')
const linearElement = useTemplateRef('linear')
@ -241,8 +251,7 @@ export default {
body: linearElement,
scrollPositionInstance: scroller,
scrollCompensation: linearScrollCompensation,
anchorId: mainStatus.value?.id,
anchorRepeatId: currentStatus.value?.id,
anchorIds,
getPlaceholderHeight,
})
const changeSuspendStateLinearLocal = (e) => {
@ -277,6 +286,7 @@ export default {
body: ancestorsElement,
scrollPositionInstance: scroller,
scrollCompensation: treeScrollCompensation,
collapseMode: 'height',
getPlaceholderHeight,
})
const changeSuspendStateAncestorsLocal = (e) => {
@ -307,9 +317,6 @@ export default {
const shouldShowAncestors = computed(
() => isExpanded.value && heightChartAncestors.value.length > 0,
)
const shouldFadeAncestors = computed(
() => mergedConfig.value.conversationTreeFadeAncestors,
)
// # Scrolling
const diveIntoStatus = (id) => tryScrollTo(id)
@ -367,7 +374,6 @@ export default {
treeViewIsSimple,
shouldShowAllConversationButton,
shouldShowAncestors,
shouldFadeAncestors,
// # Scrolling
diveToTopLevel,

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

@ -91,15 +91,14 @@
ref="ancestors"
class="thread-ancestors"
>
<article
<template
v-for="element in heightChartAncestors"
class="thread-ancestor"
:class="{'thread-ancestor-has-other-replies': getReplies(element.id).size > 1, '-faded': shouldFadeAncestors}"
:key="element.id"
>
<Status
v-if="element.type === 'item'"
class="conversation-status panel-body"
:class="getStatusClasses(element.item)"
:class="getStatusClasses(element.item, true)"
:status-id="element.item.id"
:replies="getReplies(element.item.id)"
@ -119,8 +118,9 @@
v-if="element.type === 'spacer'"
class="virtual-spacer"
:style="{ height: element.height + 'px' }"
aria-hidden="true"
/>
</article>
</template>
</div>
<ThreadTree
:status-id="currentStatus.id"
@ -138,14 +138,13 @@
ref="linear"
class="thread-body"
>
<article
<template
v-for="element in heightChartLinear"
class="panel-body"
:key="element.id ?? element.ids"
:key="element.id"
>
<Status
v-if="element.type === 'item'"
class="conversation-status"
class="panel-body conversation-status"
:class="getStatusClasses(element.item)"
:status-id="element.item.id"
:replies="getReplies(element.item.id)"
@ -163,10 +162,11 @@
/>
<div
v-if="element.type === 'spacer'"
class="virtual-spacer"
aria-hidden="true"
class="panel-body virtual-spacer"
:style="{ height: element.height + 'px' }"
/>
</article>
</template>
</div>
</div>
</div>

9
src/components/status/status.js
View file

@ -592,7 +592,7 @@ const Status = {
const [entry] = e
this.$emit('heightChange', {
id: this.status.id,
height: entry.contentRect.height,
height: entry.contentRect.height + 1,
element: this.$el,
})
},
@ -600,13 +600,18 @@ const Status = {
mounted() {
if (this.$refs.root) {
this.resizeObserver.observe(this.$refs.root)
this.updateVirtualHeight([
{
contentRect: this.$refs.root.getBoundingClientRect(),
},
])
}
},
unmounted() {
this.resizeObserver.disconnect()
},
watch: {
hideStatus: function (element) {
hideStatus: function () {
if (this.$refs.root) {
this.resizeObserver.observe(this.$refs.root)
} else {

4
src/components/status/status.vue
View file

@ -1,5 +1,5 @@
<template>
<div
<article
v-if="!hideStatus"
ref="root"
class="Status"
@ -568,7 +568,7 @@
</template>
</i18n-t>
</template>
</div>
</article>
</template>
<script src="./status.js"></script>

96
src/composables/useVirtualScrolling.js
View file

@ -1,3 +1,4 @@
import { last } from 'lodash-es'
import { computed, nextTick, ref, toValue, watch } from 'vue'
import { useWindowSize } from 'src/composables/useWindowSize.js'
@ -9,12 +10,18 @@ export function useVirtualScrolling({
body,
// 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,
// buffer zone, the amount of placeholder heights to include
buffer,
// whether to use scroll compensation when elements above anchor change
// set to 'positive' to only compensate for positive increase (useful when
// combined with infinite scroll)
scrollCompensation,
// 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
collapseMode,
// Anchor. Set of IDs of element relative to which do scroll compensation
anchorIds,
// Placeholder height specification. Must be a function.
// function will be called either:
// - without arguments (for generic placeholder, i.e. buffer zone size)
@ -38,14 +45,13 @@ export function useVirtualScrolling({
// Map every height and suspendable state
const chart = list.value.map((item) => {
const { id } = item
const height =
(() => {
if (heights.value.has(id)) {
return heights.value.get(id)
} else {
return getPlaceholderHeight(id).value
}
})() + 1 //including border
const height = (() => {
if (heights.value.has(id)) {
return heights.value.get(id)
} else {
return getPlaceholderHeight(id).value
}
})()
const suspendable = !unsuspendibleIds.value.has(id)
return { id, height, suspendable, item }
})
@ -69,41 +75,41 @@ export function useVirtualScrolling({
if (newVal.length === 0 && oldVal.length === 0) return
pauseWatchers()
// If we're not given an achor, treat last element as one
const getAnchoredEl = (list) =>
toValue(anchorId)
? list.find(
({ id }) =>
id === toValue(anchorId) || id === toValue(anchorRepeatId),
)
: list[list.length - 1]
const oldElement = getAnchoredEl(oldVal)
const newElement = getAnchoredEl(newVal)
const expansion = oldVal.length === 0 && newVal.length !== 0
const collapse = oldVal.length !== 0 && newVal.length === 0
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
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 {
throw new Error(
"Somehow both new and old elements are missing, this shouldn't happen",
)
return 0
}
})()
console.log(diff)
if (diff !== 0) {
// Scroll by amount offset changed to keep it in view
topScrollBoundary.value += diff
@ -160,7 +166,9 @@ export function useVirtualScrolling({
// # Visiblity
// Add buffer zone to boundary, equal to approx 3 items heights
const buffer = computed(() => getPlaceholderHeight().value * 3)
const bufferZone = computed(
() => getPlaceholderHeight().value * (toValue(buffer) ?? 3),
)
const heightChartGrouped = computed(() => {
// Determine visibility state
@ -169,9 +177,9 @@ export function useVirtualScrolling({
const itemBottomBoundary = heightChartItem.top + heightChartItem.height
// Include buffer zone
const finalTopScrollBoundary = topScrollBoundary.value - buffer.value
const finalTopScrollBoundary = topScrollBoundary.value - bufferZone.value
const finalBottomScrollBoundary =
bottomScrollBoundary.value + buffer.value
bottomScrollBoundary.value + bufferZone.value
// To be visible, item's bottom boundary shoud be below top scroll boundary)
const isBelowTopBoundary = itemBottomBoundary > finalTopScrollBoundary