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

src/components/conversation/conversation.js

@@ -1,4 +1,3 @@
-import { get } from 'lodash-es'
 import { storeToRefs } from 'pinia'
 import {
   computed,
@@ -20,8 +19,6 @@ 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 { useInterfaceSizes } from 'src/composables/useInterfaceSizes.js'
@@ -29,8 +26,6 @@ import { useScrollPosition } from 'src/composables/useScrollPosition.js'
 import { useTreeConversationTopology } from 'src/composables/useTreeConversationTopology.js'
 import { useVirtualScrolling } from 'src/composables/useVirtualScrolling.js'
 
-import { WSConnectionStatus } from 'src/api/websocket.js'
-
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faAngleDoubleDown,
@@ -72,18 +67,9 @@ export default {
   },
   emits: ['heightChange', 'suspendableStateChange'],
   setup(props, { emit }) {
-    // # Helpers
+    const router = useRouter()
-    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
@@ -96,19 +82,9 @@ export default {
       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')
 
@@ -123,24 +99,11 @@ export default {
     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 { statusId } = toRefs(props)
     const {
+      focusedId,
+      setFocused,
       currentStatus,
       mainStatus,
       conversation,
@@ -148,40 +111,21 @@ export default {
       getReplies,
       fetchConversation,
       loadError,
-    } = useConversation(focusedId, isExpanded)
+    } = useConversation(statusId, isExpanded)
+    const conversationLite = computed(() =>
+      conversation.value.map(({ id }) => ({ id })),
+    )
 
     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()
@@ -192,10 +136,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,
+        '-first': statusId === firstStatus.value?.id,
-        '-last': status.id === lastStatus.value?.id,
+        '-last': statusId === lastStatus.value?.id,
       }
       if (ancestor) {
         result['-ancestor'] = true
@@ -204,8 +148,6 @@ export default {
       return result
     }
 
-    const { fontSize } = useInterfaceSizes()
-
     // External virtual scrolling
     const unsuspendableIds = ref(new Set())
     const suspendable = computed(
@@ -228,6 +170,7 @@ export default {
     onUnmounted(() => resizeObserver.value.disconnect())
 
     // Placeholder heights.
+    const { fontSize } = useInterfaceSizes()
     const mutedStatusHeight = computed(() => fontSize.value * 1.5)
     const normalStatusHeight = computed(() => fontSize.value * 10)
     const getPlaceholderHeight = (id) =>
@@ -238,20 +181,26 @@ export default {
     const anchorIds = computed(
       () => new Set([mainStatus.value?.id, currentStatus.value?.id]),
     )
+
     // # Linear style stuff
     const isLinearView = computed(() => displayStyle.value !== 'tree')
     const linearElement = useTemplateRef('linear')
-    const linearScrollCompensation = computed(() => isLinearView.value)
+    const linearScrollCompensation = computed(
+      () => isExpanded.value && isLinearView.value,
+    )
     const {
       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) => {
@@ -274,15 +223,29 @@ export default {
       resetThreadDisplay,
     } = useTreeConversationTopology(conversation, replies, focusedId)
     provide('threadDisplay', threadDisplay)
+    watch(
+      isExpanded,
+      (value) => {
+        if (!value) resetThreadDisplay()
+      },
+      { flush: 'post' },
+    )
 
+    const currentAncestorsLite = computed(() =>
+      currentAncestors.value.map(({ id }) => ({ id })),
+    )
     const ancestorsElement = useTemplateRef('ancestors')
-    const treeScrollCompensation = computed(() => isTreeView.value)
+    const treeScrollCompensation = computed(
+      () => isExpanded.value && isTreeView.value,
+    )
     const {
       heightChart: heightChartAncestors,
       changeSuspendState: changeSuspendStateAncestors,
       updateVirtualHeight: updateVirtualHeightAncestors,
+      reset: resetTreeScrollVirtualization,
     } = useVirtualScrolling({
-      list: currentAncestors,
+      context: statusId,
+      list: currentAncestorsLite,
       body: ancestorsElement,
       scrollPositionInstance: scroller,
       scrollCompensation: treeScrollCompensation,
@@ -308,6 +271,11 @@ export default {
       }
     }
 
+    watch(statusId, (neu, old) => {
+      resetLinearScrollVirtualization()
+      resetTreeScrollVirtualization()
+    })
+
     const treeViewIsSimple = computed(
       () => !mergedConfig.value.conversationTreeAdvanced,
     )
@@ -333,7 +301,7 @@ export default {
       toggleExpanded,
 
       // # Focus
-      focused,
+      focusedId,
       setFocused,
 
       // # Main things

src/components/conversation/conversation.vue

@@ -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"
+              :status-id="element.id"
-              :replies="getReplies(element.item.id)"
+              :replies="getReplies(element.id)"
 
-              :focused="focused === 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)"
+            :class="getStatusClasses(element.id)"
-            :status-id="element.item.id"
+            :status-id="element.id"
-            :replies="getReplies(element.item.id)"
+            :replies="getReplies(element.id)"
 
-            :focused="focused === element.id || focused === element.item.retweeted_status?.id"
+            :focused="focusedId === element.id"
 
             :data-status-id="element.id"
             :data-vs-height="element.height"

src/components/thread_tree/thread_tree.js

@@ -37,7 +37,7 @@ const ThreadTree = {
   ],
   inject: [
     'conversation',
-    'focused',
+    'focusedId',
     'replies',
     'threadDisplay',
     'isExpanded',

src/components/thread_tree/thread_tree.vue

@@ -8,8 +8,8 @@
       class="conversation-status conversation-status-treeview panel-body"
       :status-id="statusId"
       :replies="getReplies(statusId)"
-      :focused="focused === statusId"
 
+      :focused="focusedId === status.id"
       :data-status-id="statusId"
       :conversation-rank="depth === 0 ? 'current' : 'child'"
       :thread-display-state="threadDisplay.get(statusId)"

src/components/timeline/timeline.vue

@@ -88,7 +88,7 @@
         >
           <Conversation
             v-if="element.type === 'item'"
-            :status-id="element.item.id"
+            :status-id="element.id"
             role="listitem"
 
             :data-vs-height="element.height"

src/composables/useConversation.js

@@ -1,29 +1,68 @@
-import { get } from 'lodash-es'
+import { storeToRefs } from 'pinia'
-import { computed, provide, ref } from 'vue'
+import { computed, provide, ref, watch } from 'vue'
 
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
 import { useOAuthStore } from 'src/stores/oauth.js'
 import { useStatusesStore } from 'src/stores/statuses.js'
+import { useStreamingStore } from 'src/stores/streaming.js'
+
+import { useMainStatus } from 'src/composables/useMainStatus.js'
 
 import {
   fetchConversation as apiFetchConversation,
   fetchStatus as apiFetchStatus,
 } from 'src/api/public.js'
+import { WSConnectionStatus } from 'src/api/websocket.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 { status: currentStatus, mainStatus } = useMainStatus(statusId)
-  const mainStatus = computed(
+
-    () => currentStatus.value?.retweeted_status ?? currentStatus.value,
+  // # Config
+  const { mergedConfig } = storeToRefs(useMergedConfigStore())
+  const { mastoUserSocketStatus } = storeToRefs(useStreamingStore())
+  const streamingEnabled = computed(
+    () =>
+      mergedConfig.value.useStreamingApi &&
+      mastoUserSocketStatus === WSConnectionStatus.JOINED,
+  )
+
+  // # Focus
+  const focusedId = ref(null)
+  const { mainStatus: focusedStatus } = useMainStatus(focusedId)
+  const setFocused = (id) => {
+    focusedId.value = id
+  }
+  provide('focusedId', focusedId)
+
+  watch(mainStatus, (newStatus, oldStatus) => {
+    if (newStatus) setFocused(newStatus.id)
+    if (newStatus.id !== oldStatus.id) {
+      fetchConversation()
+    }
+  })
+
+  watch(
+    expanded,
+    (value) => {
+      setFocused(value ? statusId.value : null)
+    },
+    { immediate: true },
+  )
+
+  watch(
+    focusedStatus,
+    (newVal, oldVal) => {
+      if (!newVal) return
+      if (newVal?.id === oldVal?.id) return // prevents infinite loop
+      if (!streamingEnabled.value) {
+        useStatusesStore().fetchStatus(newVal.id)
+      }
+
+      useStatusesStore().fetchFavsAndRepeats(newVal.id)
+      useStatusesStore().fetchEmojiReactions(newVal.id)
+    },
+    { immediate: true },
   )
 
   const sortById = (a, b) => {
@@ -43,7 +82,9 @@ export function useConversation(statusId, expanded) {
       return idA < idB ? -1 : 1
     }
   }
-  const conversationId = computed(() => getConversationId(statusId.value))
+  const conversationId = computed(
+    () => mainStatus.value.statusnet_conversation_id,
+  )
   const conversation = computed(() => {
     if (!currentStatus.value) {
       return []
@@ -117,6 +158,8 @@ export function useConversation(statusId, expanded) {
   }
 
   return {
+    focusedId,
+    setFocused,
     currentStatus,
     mainStatus,
     conversation,

src/composables/useMainStatus.js

@@ -0,0 +1,24 @@
+import { computed, toValue } from 'vue'
+
+import { useStatusesStore } from 'src/stores/statuses.js'
+
+export function useMainStatus(statusId) {
+  const getStatusObject = (id) => useStatusesStore().allStatuses.get(id)
+
+  const status = computed(() => getStatusObject(toValue(statusId)))
+
+  const mainStatus = computed(() => {
+    if (!status.value) return
+    const retweetedStatusId = status.value.retweeted_status?.id
+    if (retweetedStatusId) {
+      return getStatusObject(retweetedStatusId)
+    } else {
+      return status.value
+    }
+  })
+
+  return {
+    status,
+    mainStatus,
+  }
+}

src/composables/useVirtualScrolling.js

@@ -1,4 +1,4 @@
-import { last } from 'lodash-es'
+import { first, last } 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,93 @@ export function useVirtualScrolling({
     () => getPlaceholderHeight().value * (toValue(buffer) ?? 3),
   )
 
-  const heightChartGrouped = computed(() => {
+  const checkVisible = ({ top, height }) => {
-    // Determine visibility state
+    const itemTopBoundary = top
-    const chart = heightChart.value.map((heightChartItem) => {
+    const itemBottomBoundary = top + height
-      const itemTopBoundary = heightChartItem.top
-      const itemBottomBoundary = heightChartItem.top + heightChartItem.height
 
-      // Include buffer zone
+    // Include buffer zone
-      const finalTopScrollBoundary = topScrollBoundary.value - bufferZone.value
+    const finalTopScrollBoundary = topScrollBoundary.value - bufferZone.value
-      const finalBottomScrollBoundary =
+    const finalBottomScrollBoundary =
-        bottomScrollBoundary.value + bufferZone.value
+      bottomScrollBoundary.value + bufferZone.value
 
-      // To be visible, item's bottom boundary shoud be below top scroll boundary)
+    // To be visible, item's bottom boundary shoud be below top scroll boundary)
-      const isBelowTopBoundary = itemBottomBoundary > finalTopScrollBoundary
+    const isBelowTopBoundary = itemBottomBoundary > finalTopScrollBoundary
-      // To be visible, item's top boundary shoud be above bottom scroll boundary)
+    // To be visible, item's top boundary shoud be above bottom scroll boundary)
-      const isAboveBottomBoundary = itemTopBoundary < finalBottomScrollBoundary
+    const isAboveBottomBoundary = itemTopBoundary < finalBottomScrollBoundary
-      // This accounts for the case where item's boundaries exceed scroll boundary
+    // This accounts for the case where item's boundaries exceed scroll boundary
 
-      return {
+    return isBelowTopBoundary && isAboveBottomBoundary
-        ...heightChartItem,
+  }
-        visible: 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 {
+          const oldVisible = oldVal.filter((item) => checkVisible(item))
+          const oldItem = first(oldVisible)
+          if (!oldItem) return 0 // probably out of bounds in timeline
+          const oldItemUpdated = newVal.find(({ id }) => id === oldItem.id)
+          if (!oldItemUpdated) return 0 // context change?
+          return (
+            oldItemUpdated.top -
+            oldItem.top -
+            (oldItem.height - oldItemUpdated.height)
+          )
+        }
+      })()
+
+      if (diff !== 0) {
+        // 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) => {
+    heightChartVisibility.value.reduce((acc, heightChartItem) => {
-      const { suspendable, visible, height, top, bottom, id, item } =
+      const { suspendable, visible, height, top, bottom, id } = heightChartItem
-        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]
@@ -231,8 +238,13 @@ export function useVirtualScrolling({
           return [...acc, spacer]
         }
       }
-    }, [])
+    }, []),
-  })
+  )
+
+  const reset = async () => {
+    unsuspendibleIds.value = new Set()
+    heights.value = new Map()
+  }
 
   return {
     heightChart: heightChartGrouped,
@@ -241,5 +253,6 @@ export function useVirtualScrolling({
     pauseWatchers,
     resumeWatchers,
     updateBoundaries,
+    reset,
   }
 }