No OneTemporary
Actions

Size

32 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
	index b77ead5296..863e4f61e7 100644
	--- a/src/components/conversation/conversation.js
	+++ b/src/components/conversation/conversation.js
	@@ -1,349 +1,341 @@
	import { get } from 'lodash-es'
	import { storeToRefs } from 'pinia'
	import { computed, provide, ref, toRefs, useTemplateRef, watch } from 'vue'
	import { useRouter } from 'vue-router'

	import ChatMessageList from 'src/components/chat_message_list/chat_message_list.vue'
	import PostStatusForm from 'src/components/post_status_form/post_status_form.vue'
	import QuickFilterSettings from 'src/components/quick_filter_settings/quick_filter_settings.vue'
	import QuickViewSettings from 'src/components/quick_view_settings/quick_view_settings.vue'
	import RichContent from 'src/components/rich_content/rich_content.jsx'
	import ThreadTree from 'src/components/thread_tree/thread_tree.vue'

	import { useInterfaceStore } from 'src/stores/interface.js'
	import { useMergedConfigStore } from 'src/stores/merged_config.js'
	import { useStatusesStore } from 'src/stores/statuses.js'
	import { useStreamingStore } from 'src/stores/streaming.js'

	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'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faAngleDoubleDown,
	faAngleDoubleLeft,
	faChevronLeft,
	faReply,
	faTimes,
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faAngleDoubleDown,
	faAngleDoubleLeft,
	faChevronLeft,
	faReply,
	faTimes,
	)

	export default {
	props: {
	statusId: {
	// Main thing
	type: String,
	required: true,
	},
	isPage: {
	// Whether conversation is rendered as a standalone page
	// as opposed to embedded into a timeline
	type: Boolean,
	default: false,
	},
	},
	components: {
	ThreadTree,
	QuickFilterSettings,
	QuickViewSettings,
	ChatMessageList,
	PostStatusForm,
	RichContent,
	},
	setup(props) {
	// # Helpers
	const getStatusObject = (id) => useStatusesStore().allStatuses.get(id)
	const getConversationId = (statusId) => {
	const status = getStatusObject(statusId)
	return get(
	status,
	'retweeted_status.statusnet_conversation_id',
	get(status, 'statusnet_conversation_id'),
	)
	}

	const scroller = useScrollPosition()
	const tryScrollTo = async (id) => {
	if (!id) {
	return
	}
	if (isPage.value) {
	router.push({ name: 'conversation', params: { statusId: id } })
	}
	setFocused(id)
	const target = document.querySelector(`.Status[data-status-id=${id}]`)
	return await scroller.scrollIntoView(target, { block: 'nearest' })
	}

	const { statusId } = toRefs(props)

	const router = useRouter()

	// # Main Configuration / global state
	const { mergedConfig } = storeToRefs(useMergedConfigStore())
	const { mastoUserSocketStatus } = storeToRefs(useStreamingStore())
	const displayStyle = computed(() => mergedConfig.value.conversationDisplay)
	const streamingEnabled = computed(
	() =>
	mergedConfig.value.useStreamingApi &&
	mastoUserSocketStatus === WSConnectionStatus.JOINED,
	)
	const { layoutType } = storeToRefs(useInterfaceStore())
	const mobileLayout = computed(() => layoutType.value === 'mobile')

	// # Conversation Expansion
	const expanded = ref(false)
	const { isPage } = toRefs(props)
	const isExpanded = computed(() => !!(expanded.value \|\| isPage.value))
	const toggleExpanded = () => {
	expanded.value = !expanded.value
	}
	provide('isExpanded', isExpanded)
	provide('isPage', isPage)
	provide('expandable', true)

	// # Focus
	const focusedId = ref(statusId.value)
	const focused = computed(() => (isExpanded.value ? focusedId.value : null))
	const setFocused = (id) => {
	if (!id) return
	focusedId.value = id

	if (!streamingEnabled.value) {
	useStatusesStore().fetchStatus(id)
	}

	useStatusesStore().fetchFavsAndRepeats(id)
	useStatusesStore().fetchEmojiReactions(id)
	}
	provide('focused', focused)

	// # Main things
	const {
	currentStatus,
	+ mainStatus,
	conversation,
	replies,
	getReplies,
	fetchConversation,
	loadError,
	} = useConversation(focusedId, isExpanded)

	watch(
	expanded,
	async (value) => {
	if (value) {
	await fetchConversation()
	} else {
	resetDisplayState()
	}
	if (isPage.value) return
	},
	{ flush: 'post' },
	)

	const resetDisplayState = () => {
	setFocused(statusId.value)
	resetThreadDisplay()
	}
	watch(statusId, (newVal, oldVal) => {
	const newConversationId = getConversationId(newVal)
	const oldConversationId = getConversationId(oldVal)
	if (
	newConversationId &&
	oldConversationId &&
	newConversationId === oldConversationId
	) {
	setFocused(newVal)
	} else {
	resetDisplayState()
	fetchConversation()
	}
	})

	// Component created
	if (isPage.value) {
	fetchConversation()
	}

	// # Misc UI things
	const firstStatus = computed(() => conversation.value[0])
	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 { 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,
	pauseWatchers,
	resumeWatchers,
	} = useVirtualScrolling({
	list: conversation,
	body: linearElement,
	scrollPositionInstance: scroller,
	scrollCompensation: linearScrollCompensation,
	- anchorId: currentStatus.id,
	+ anchorId: mainStatus.value?.id,
	+ anchorRepeatId: currentStatus.value?.id,
	getPlaceholderHeight,
	})

	- watch(
	- expanded,
	- async (value) => {
	- pauseWatchers()
	- await tryScrollTo(currentStatus.value.id)
	- resumeWatchers()
	- },
	- { flush: 'post' },
	- )
	-
	// # Tree style stuff
	const isTreeView = computed(() => displayStyle.value === 'tree')
	const {
	topLevel,
	currentAncestors,
	threadDisplay,
	showThreadRecursively,
	resetThreadDisplay,
	} = useTreeConversationTopology(conversation, replies, focusedId)
	provide('threadDisplay', threadDisplay)

	const ancestorsElement = useTemplateRef('ancestors')
	const treeScrollCompensation = computed(
	- () => isTreeView.value && isExpanded.value,
	+ () => isTreeView.value,
	)
	const {
	heightChart: heightChartAncestors,
	changeSuspendState: changeSuspendStateAncestors,
	updateVirtualHeight: updateVirtualHeightAncestors,
	} = useVirtualScrolling({
	list: currentAncestors,
	body: ancestorsElement,
	scrollPositionInstance: scroller,
	scrollCompensation: treeScrollCompensation,
	getPlaceholderHeight,
	})

	const currentLevel = computed(() => [currentStatus.value].filter(Boolean))
	const currentLevelElement = useTemplateRef('currentLevel')
	const {
	heightChart: heightChartCurrentLevel,
	changeSuspendState: changeSuspendStateCurrentLevel,
	updateVirtualHeight: updateVirtualHeightCurrentLevel,
	} = useVirtualScrolling({
	list: currentLevel,
	body: currentLevelElement,
	scrollPositionInstance: scroller,
	scrollCompensation: false,
	getPlaceholderHeight,
	})

	const treeViewIsSimple = computed(
	() => !mergedConfig.value.conversationTreeAdvanced,
	)
	const shouldShowAllConversationButton = computed(
	() => currentAncestors.value.length > 0 && topLevel.value.length > 1,
	)
	const shouldShowAncestors = computed(
	() => isExpanded.value && heightChartAncestors.value.length > 0,
	)
	const shouldFadeAncestors = computed(
	() => mergedConfig.value.conversationTreeFadeAncestors,
	)

	// # Scrolling
	const diveIntoStatus = (id) => tryScrollTo(id)
	const diveToTopLevel = () => tryScrollTo(currentAncestors.value[0].id)

	return {
	// # Misc
	loadError,
	mobileLayout,

	// # Conversation Expansion
	isPage,
	isExpanded,
	toggleExpanded,

	// # Focus
	focused,
	setFocused,

	// # Main things
	conversation,
	currentStatus,
	getReplies,

	// # Misc UI things
	getStatusClasses,

	// # Linear style stuff
	isLinearView,

	// ## Linear virtual scrolling
	heightChartLinear,
	changeSuspendStateLinear,
	updateVirtualHeightLinear,

	// # Tree style stuff
	isTreeView,

	// ## Tree virtual scrolling
	heightChartAncestors,
	changeSuspendStateAncestors,
	updateVirtualHeightAncestors,
	heightChartCurrentLevel,
	changeSuspendStateCurrentLevel,
	updateVirtualHeightCurrentLevel,

	// ## Tree state
	// ### Topology
	topLevel,
	currentAncestors,

	// ### Thread Display
	showThreadRecursively,

	// ### Derived values and config
	treeViewIsSimple,
	shouldShowAllConversationButton,
	shouldShowAncestors,
	shouldFadeAncestors,

	// # Scrolling
	diveToTopLevel,
	diveIntoStatus,
	}
	},
	}
	diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
	index 8518565a91..8d4c4f9670 100644
	--- a/src/components/conversation/conversation.vue
	+++ b/src/components/conversation/conversation.vue
	@@ -1,187 +1,189 @@
	<template>
	<div
	ref="root"
	class="Conversation"
	:class="{ '-expanded' : isExpanded, '-page': isPage, 'panel' : isExpanded }"
	>
	<div
	v-if="isExpanded"
	class="panel-heading conversation-heading -sticky"
	>
	<h1 class="title">
	<RichContent
	v-if="conversation[0]?.summary_raw_html"
	:html="conversation[0].summary_raw_html"
	:emoji="conversation[0].emojis"
	/>
	<template v-else>
	{{ $t('timeline.conversation') }}
	</template>
	</h1>
	<button
	v-if="!isPage"
	class="button-unstyled -link"
	@click.prevent="toggleExpanded"
	>
	{{ $t('timeline.collapse') }}
	</button>
	<QuickFilterSettings
	v-if="isPage && mobileLayout"
	:conversation="true"
	class="rightside-button"
	/>
	<QuickViewSettings
	v-if="isPage"
	:conversation="true"
	class="rightside-button"
	/>
	</div>
	<div
	v-if="isPage && !currentStatus"
	class="conversation-body"
	ref="body"
	:class="{ 'panel-body': isExpanded }"
	>
	<p v-if="!loadError">
	<FAIcon
	spin
	icon="circle-notch"
	/>
	{{ $t('status.loading') }}
	</p>
	<p v-else>
	{{ $t('status.load_error', { error: loadError }) }}
	</p>
	</div>
	<div
	v-else
	class="conversation-body"
	ref="body"
	:class="{ 'panel-body': isExpanded }"
	>
	<div
	v-if="isTreeView"
	class="thread-body"
	>
	<div
	v-if="shouldShowAllConversationButton"
	class="conversation-dive-to-top-level-box"
	>
	<i18n-t
	keypath="currentStatus.show_all_conversation_with_icon"
	tag="button"
	class="button-unstyled -link"
	scope="global"
	@click.prevent="diveToTopLevel"
	>
	<template #icon>
	<FAIcon
	icon="angle-double-left"
	/>
	</template>
	<template #text>
	<span>
	{{ $t('status.show_all_conversation', { numStatus: topLevel.length - 1 }, topLevel.length - 1) }}
	</span>
	</template>
	</i18n-t>
	</div>
	<div
	v-if="shouldShowAncestors"
	ref="ancestors"
	class="thread-ancestors"
	>
	<article
	v-for="element in heightChartAncestors"
	class="thread-ancestor"
	:class="{'thread-ancestor-has-other-replies': getReplies(element.id).size > 1, '-faded': shouldFadeAncestors}"
	>
	<Status
	v-if="element.type === 'item'"
	class="conversation-status panel-body"
	:class="getStatusClasses(element.item)"

	:status-id="element.item.id"
	:replies="getReplies(element.item.id)"

	:focused="focused === element.item.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)"
	@suspendable-state-change="changeSuspendStateAncestors"
	@height-change="updateVirtualHeightAncestors"
	/>
	<div
	v-if="element.type === 'spacer'"
	class="virtual-spacer"
	:style="{ height: element.height + 'px' }"
	/>
	</article>
	</div>
	<div
	class="currentLevel"
	ref="currentLevel"
	>
	<!-- Technically this will always have a single element but -->
	<!-- it's more convenient for us to use a v-for here -->
	<template v-for="element in heightChartCurrentLevel">
	<ThreadTree
	v-if="element.type === 'item'"
	:status-id="currentStatus.id"
	:depth="0"

	@goto="setFocused"
	@dive="diveIntoStatus"
	@toggle-expanded="toggleExpanded"
	@show-thread-recursively="showThreadRecursively"
	@suspendable-state-change="changeSuspendStateCurrentLevel"
	@height-change="updateVirtualHeightCurrentLevel"
	/>
	<div
	v-if="element.type === 'spacer'"
	class="virtual-spacer"
	:style="{ height: element.height + 'px' }"
	/>
	</template>
	</div>
	</div>
	<div
	v-else-if="isLinearView"
	ref="linear"
	class="thread-body"
	>
	<article
	v-for="element in heightChartLinear"
	class="panel-body"
	:key="element.id ?? element.ids"
	>
	<Status
	v-if="element.type === 'item'"
	class="conversation-status"
	:class="getStatusClasses(element.item)"
	:status-id="element.item.id"
	:replies="getReplies(element.item.id)"

	:focused="focused === element.id \|\| focused === element.item.retweeted_status?.id"

	:data-status-id="element.id"
	@goto="setFocused"
	@toggle-expanded="toggleExpanded"
	@suspendable-state-change="changeSuspendStateLinear"
	@height-change="updateVirtualHeightLinear"
	/>
	<div
	v-if="element.type === 'spacer'"
	class="virtual-spacer"
	:style="{ height: element.height + 'px' }"
	/>
	</article>
	</div>
	</div>
	</div>
	</template>

	<script src="./conversation.js"></script>
	<style src="./conversation.scss" />
	diff --git a/src/composables/useConversation.js b/src/composables/useConversation.js
	index 989e12c61a..a0cc960cc6 100644
	--- a/src/composables/useConversation.js
	+++ b/src/composables/useConversation.js
	@@ -1,124 +1,126 @@
	import { get } from 'lodash-es'
	import { computed, provide, ref } from 'vue'

	import { useOAuthStore } from 'src/stores/oauth.js'
	import { useStatusesStore } from 'src/stores/statuses.js'

	import {
	fetchConversation as apiFetchConversation,
	fetchStatus as apiFetchStatus,
	} from 'src/api/public.js'

	export function useConversation(statusId, expanded) {
	const getStatusObject = (id) => useStatusesStore().allStatuses.get(id)
	const getConversationId = (statusId) => {
	const status = getStatusObject(statusId)
	return get(
	status,
	'retweeted_status.statusnet_conversation_id',
	get(status, 'statusnet_conversation_id'),
	)
	}

	const loadError = ref(null)
	const currentStatus = computed(() => 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
	const idB = b.type === 'retweet' ? b.retweeted_status.id : b.id
	const seqA = Number(idA)
	const seqB = Number(idB)
	const isSeqA = !Number.isNaN(seqA)
	const isSeqB = !Number.isNaN(seqB)
	if (isSeqA && isSeqB) {
	return seqA < seqB ? -1 : 1
	} else if (isSeqA && !isSeqB) {
	return -1
	} else if (!isSeqA && isSeqB) {
	return 1
	} else {
	return idA < idB ? -1 : 1
	}
	}
	const conversationId = computed(() => getConversationId(statusId.value))
	const conversation = computed(() => {
	if (!currentStatus.value) {
	return []
	}

	if (!expanded.value) {
	return [currentStatus.value]
	}

	const conversation = useStatusesStore().conversations.get(
	conversationId.value,
	)

	return [...conversation.keys()]
	.map((k) => useStatusesStore().allStatuses.get(k))
	.filter((status) => status.type != 'repeat') // Old backend behavior?
	.toSorted(sortById)
	})
	const replies = computed(() =>
	conversation.value.reduce(
	(result, { id, in_reply_to_status_id: irid }, index) => {
	if (irid) {
	if (!result.has(irid)) {
	result.set(irid, new Set())
	}
	result.get(irid).add({
	name: `#${index}`,
	id,
	})
	}
	return result
	},
	new Map(),
	),
	)
	const getReplies = (id) => replies.value.get(id) ?? new Set()
	provide('conversation', conversation)
	provide('replies', replies)

	const fetchConversation = async () => {
	if (currentStatus.value) {
	const {
	data: { ancestors, descendants },
	timestamp,
	} = await apiFetchConversation({
	id: statusId.value,
	credentials: useOAuthStore().token,
	})

	useStatusesStore().addNewStatuses({ statuses: ancestors, timestamp })
	useStatusesStore().addNewStatuses({
	statuses: descendants,
	timestamp,
	})
	} else {
	try {
	loadError.value = null

	const { data: status } = await apiFetchStatus({
	id: statusId.value,
	credentials: useOAuthStore().token,
	})

	useStatusesStore().addNewStatuses({ statuses: [status] })
	fetchConversation()
	} catch (error) {
	console.error(error)
	loadError.value = error
	}
	}
	}

	return {
	currentStatus,
	+ mainStatus,
	conversation,
	replies,
	getReplies,
	fetchConversation,
	loadError,
	}
	}
	diff --git a/src/composables/useTreeConversationTopology.js b/src/composables/useTreeConversationTopology.js
	index b2ce7e23d5..6e7e4fb002 100644
	--- a/src/composables/useTreeConversationTopology.js
	+++ b/src/composables/useTreeConversationTopology.js
	@@ -1,111 +1,111 @@
	import { storeToRefs } from 'pinia'
	import { computed, ref } from 'vue'

	import { useMergedConfigStore } from 'src/stores/merged_config.js'
	import { useStatusesStore } from 'src/stores/statuses.js'

	export function useTreeConversationTopology(conversation, replies, current) {
	const getStatusObject = (id) => useStatusesStore().allStatuses.get(id)
	const getReplies = (id) => replies.value.get(id) ?? new Set()

	const { mergedConfig } = storeToRefs(useMergedConfigStore())

	const maxDepthToShowByDefault = computed(() => {
	// maxDepthInThread = max number of depths that is visible
	// since our depth starts with 0 and "showing" means "showing children"
	// there is a -2 here
	const maxDepth = mergedConfig.value.maxDepthInThread - 2
	return Math.min(1, maxDepth)
	})

	const ancestors = computed(() => {
	// First we fill map with empty sets and add given id's parent
	// as set's only element (if any)
	const parentMap = conversation.value.reduce(
	(result, { id, in_reply_to_status_id: irid }) => {
	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)
	}
	return result
	},
	new Map(),
	)

	// Next we iterate over each entry and fill the whole ancestry chain
	parentMap.entries().forEach(([originId, originSet]) => {
	let current = originSet.values().next().value
	while (current) {
	originSet.add(current)

	const parent = parentMap.get(current) ?? new Set()

	current = parent.values().next().value
	}
	})
	return parentMap
	})
	const topLevel = computed(() =>
	[...ancestors.value.entries()]
	.filter(([id, ancestors]) => ancestors.size === 0)
	.map(([id]) => getStatusObject(id)),
	)
	const getAncestorIds = (id) => ancestors.value.get(id) ?? new Set()
	const getAncestors = (id) =>
	[...getAncestorIds(id)].map(getStatusObject).filter(Boolean)
	const currentAncestors = computed(() => getAncestors(current.value).reverse())
	const currentDepth = computed(() => currentAncestors.value.length)

	// Thread Display, for collapsing/expanding tree branches
	// Map of id => 'showing' \| 'hidden'
	const threadDisplayOverride = ref(new Map())
	const threadDisplayDefault = computed(() => {
	return conversation.value.reduce((map, status) => {
	const { id } = status
	const depth = ancestors.value.get(id).size

	const state = (() => {
	if (depth - currentDepth.value <= maxDepthToShowByDefault.value) {
	return 'showing'
	} else {
	return 'hidden'
	}
	})()

	map.set(id, state)
	return map
	}, new Map())
	})
	const threadDisplay = computed(() => {
	return new Map(
	[...threadDisplayDefault.value.entries()].map(([k, v]) => [
	k,
	threadDisplayOverride.value.get(k) ?? threadDisplayDefault.value.get(k),
	]),
	)
	})

	const setThreadDisplayRecursively = (id, value) => {
	threadDisplayOverride.value.set(id, value)
	;[...getReplies(id)]
	.map((k) => k.id)
	.map((id) => setThreadDisplayRecursively(id, value))
	}
	const showThreadRecursively = (id) => {
	setThreadDisplayRecursively(id, 'showing')
	}
	const resetThreadDisplay = () => {
	threadDisplayOverride.value = new Map()
	}

	return {
	topLevel,
	currentAncestors,
	threadDisplay,
	showThreadRecursively,
	resetThreadDisplay,
	}
	}
	diff --git a/src/composables/useVirtualScrolling.js b/src/composables/useVirtualScrolling.js
	index e08d703041..bb1f11903c 100644
	--- a/src/composables/useVirtualScrolling.js
	+++ b/src/composables/useVirtualScrolling.js
	@@ -1,216 +1,232 @@
	-import { computed, ref, toValue, watch } from 'vue'
	+import { computed, ref, toValue, watch, nextTick } from 'vue'

	import { useWindowSize } from 'src/composables/useWindowSize.js'

	export function useVirtualScrolling({
	// List of items
	list,
	// Container of items, used for measuring scroll position
	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,
	// whether to use scroll compensation when elements above anchor change
	scrollCompensation,
	// 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) {
	unsuspendibleIds.value.add(id)
	} else {
	unsuspendibleIds.value.delete(id)
	}
	}

	// # Heights mapping.
	const heights = ref(new Map())
	const heightChart = computed(() => {
	// 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 suspendable = !unsuspendibleIds.value.has(id)
	return { id, height, suspendable, item }
	})

	// Walk over the list to set top offsets
	chart.reduce((sum, item) => {
	item.top = sum
	return sum + item.height
	}, 0)

	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) =>
	- anchorId?.value
	- ? list.find(({ id }) => id === anchorId?.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)
	}

	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 itemTopBoundary = heightChartItem.top
	const itemBottomBoundary = heightChartItem.top + heightChartItem.height

	// Include buffer zone
	const finalTopScrollBoundary = topScrollBoundary.value - buffer.value
	const finalBottomScrollBoundary =
	bottomScrollBoundary.value + buffer.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

	return {
	...heightChartItem,
	visible: isBelowTopBoundary && isAboveBottomBoundary,
	}
	})

	// Group invisible items into spacers
	return chart.reduce((acc, heightChartItem) => {
	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: 'item', height, top, bottom, id, item }]
	} else {
	// Reusing previous item if possible
	const previousItem = acc[acc.length - 1]
	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() // used for v-for key attribute
	spacer.height += height

	if (top < spacer.top) spacer.top = top
	if (bottom < spacer.bottom) spacer.bottom = bottom

	// If we used previous item there is no need to push it to array
	if (usingPreviousItem) {
	return acc
	} else {
	return [...acc, spacer]
	}
	}
	}, [])
	})

	return {
	heightChart: heightChartGrouped,
	changeSuspendState,
	updateVirtualHeight,
	pauseWatchers,
	resumeWatchers,
	+ updateBoundaries,
	}
	}

File Metadata

Mime Type: text/x-diff
Expires: Sat, Sep 19, 1:14 PM (20 h, 59 m)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1762759
Default Alt Text: (32 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions