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

changelog.d/virtual-scrolling-2.change

@@ -0,0 +1 @@
+Implemented new virtual scrolling. Opening huge threads should be faster now

src/components/conversation/conversation.js

@@ -19,6 +19,7 @@ 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'
 
@@ -83,7 +84,7 @@ export default {
       }
       setFocused(id)
       const target = document.querySelector(`.Status[data-status-id=${id}]`)
-      return await scroller.scrollIntoView(target, { block: 'start' })
+      return await scroller.scrollIntoView(target, { block: 'nearest' })
     }
 
     const { statusId } = toRefs(props)
@@ -132,6 +133,7 @@ export default {
     // # Main things
     const {
       currentStatus,
+      mainStatus,
       conversation,
       replies,
       getReplies,
@@ -148,7 +150,6 @@ export default {
           resetDisplayState()
         }
         if (isPage.value) return
-        await tryScrollTo(currentStatus.value.id)
       },
       { flush: 'post' },
     )
@@ -187,23 +188,37 @@ export default {
       '-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,
-    } = useVirtualScrolling(
+      pauseWatchers,
-      conversation,
+      resumeWatchers,
-      linearElement,
+    } = useVirtualScrolling({
-      scroller,
+      list: conversation,
-      linearScrollCompensation,
+      body: linearElement,
-      currentStatus,
+      scrollPositionInstance: scroller,
-    )
+      scrollCompensation: linearScrollCompensation,
+      anchorId: mainStatus.value?.id,
+      anchorRepeatId: currentStatus.value?.id,
+      getPlaceholderHeight,
+    })
 
     // # Tree style stuff
     const isTreeView = computed(() => displayStyle.value === 'tree')
@@ -218,18 +233,19 @@ export default {
 
     const ancestorsElement = useTemplateRef('ancestors')
     const treeScrollCompensation = computed(
-      () => isTreeView.value && isExpanded.value,
+      () => isTreeView.value,
     )
     const {
       heightChart: heightChartAncestors,
       changeSuspendState: changeSuspendStateAncestors,
       updateVirtualHeight: updateVirtualHeightAncestors,
-    } = useVirtualScrolling(
+    } = useVirtualScrolling({
-      currentAncestors,
+      list: currentAncestors,
-      ancestorsElement,
+      body: ancestorsElement,
-      scroller,
+      scrollPositionInstance: scroller,
-      treeScrollCompensation,
+      scrollCompensation: treeScrollCompensation,
-    )
+      getPlaceholderHeight,
+    })
 
     const currentLevel = computed(() => [currentStatus.value].filter(Boolean))
     const currentLevelElement = useTemplateRef('currentLevel')
@@ -237,7 +253,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,

src/components/conversation/conversation.vue

@@ -97,19 +97,21 @@
             :class="{'thread-ancestor-has-other-replies': getReplies(element.id).size > 1, '-faded': shouldFadeAncestors}"
           >
             <Status
-              v-if="element.type === 'status'"
+              v-if="element.type === 'item'"
               class="conversation-status panel-body"
-              :class="getStatusClasses(element.status)"
+              :class="getStatusClasses(element.item)"
 
-              :status-id="element.status.id"
+              :status-id="element.item.id"
-              :replies="getReplies(element.status.id)"
+              :replies="getReplies(element.item.id)"
 
-              :focused="focused === element.status.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.status.id)"
+              @dive="diveIntoStatus(element.item.id)"
               @suspendable-state-change="changeSuspendStateAncestors"
               @height-change="updateVirtualHeightAncestors"
             />
@@ -128,7 +130,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 +160,13 @@
           :key="element.id ?? element.ids"
         >
           <Status
-            v-if="element.type === 'status'"
+            v-if="element.type === 'item'"
             class="conversation-status"
-            :class="getStatusClasses(element.status)"
+            :class="getStatusClasses(element.item)"
-            :status-id="element.status.id"
+            :status-id="element.item.id"
-            :replies="getReplies(element.status.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"

src/composables/useConversation.js

@@ -22,6 +22,7 @@ export function useConversation(statusId, expanded) {
 
   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
@@ -115,6 +116,7 @@ export function useConversation(statusId, expanded) {
 
   return {
     currentStatus,
+    mainStatus,
     conversation,
     replies,
     getReplies,

src/composables/useInterfaceSizes.js

@@ -0,0 +1,43 @@
+import { computed, ref, toValue, watch } from 'vue'
+import { storeToRefs } from 'pinia'
+
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
+
+export function useInterfaceSizes() {
+  const { mergedConfig } = storeToRefs(useMergedConfigStore())
+
+  // 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 })
+
+  const navbarSize = computed(() => {
+    const string = fontSize.value * window
+      .getComputedStyle(document.body)
+      .getPropertyValue('--navbarSize')
+
+    return fontSize.value * Number.parseInt(string.slice(0, -3), 10) // remove the 'rem'
+  })
+
+  const panelHeaderSize = computed(() => {
+    const string = fontSize.value * window
+      .getComputedStyle(document.body)
+      .getPropertyValue('--panelHeaderSize')
+
+    return fontSize.value * Number.parseInt(string.slice(0, -3), 10) // remove the 'rem'
+  })
+
+  return {
+    fontSize,
+    navbarSize,
+    panelHeaderSize,
+  }
+}

src/composables/useScrollPosition.js

@@ -1,5 +1,7 @@
 import { onMounted, onUnmounted, ref } from 'vue'
 
+import { useWindowSize } from 'src/composables/useWindowSize.js'
+
 export function useScrollPosition() {
   const x = ref(0)
   const y = ref(0)
@@ -25,7 +27,20 @@ export function useScrollPosition() {
   }
 
   const scrollIntoView = async (element, options) => {
+    if (element == null) throw new TypeError(`Element is ${element}!`)
     inProgress.value = true
+    if (!element.scrollIntoViewIfNeeded) {
+      const { height: windowHeight } = useWindowSize()
+      const { top, height } = element.getBoundingClientRect()
+      const bottom = top + height
+
+      const biggerThanScreen = height > windowHeight
+      const aboveTop = top < 0
+      const belowBottom = bottom > windowHeight.value
+      if (aboveTop || belowBottom || biggerThanScreen) {
+        await element.scrollIntoView(options)
+      }
+    }
     await element.scrollIntoViewIfNeeded(options)
     inProgress.value = false
   }

src/composables/useTreeConversationTopology.js

@@ -26,7 +26,7 @@ export function useTreeConversationTopology(conversation, replies, current) {
         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)
         }

src/composables/useVirtualScrolling.js

@@ -1,23 +1,28 @@
-import { storeToRefs } from 'pinia'
+import { computed, ref, toValue, watch, nextTick } from 'vue'
-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(
+export function useVirtualScrolling({
-  conversation,
+  // List of items
+  list,
+  // Container of items, used for measuring scroll position
   body,
-  scrollPosition,
+  // 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,
-  anchorStatus,
+  // Placeholder height specification. Must be a function.
-) {
+  // function will be called either:
-  const getStatusObject = (id) => useStatusesStore().allStatuses.get(id)
+  // - without arguments (for generic placeholder, i.e. buffer zone size)
-
+  // - with id (for specific item placeholders)
-  const { mergedConfig } = storeToRefs(useMergedConfigStore())
+  // function must return ref pointing to height
-  const anchor = computed(() => anchorStatus?.value.id)
+  getPlaceholderHeight,
-
+}) {
+  // # Suspension
   const unsuspendibleIds = ref(new Set())
   const changeSuspendState = ({ id, suspend }) => {
     if (!suspend) {
@@ -27,97 +32,22 @@ export function useVirtualScrolling(
     }
   }
 
-  // Getting the actual font size in pixels since UI might have
+  // # Heights mapping.
-  // 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)
-
-  // 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 chart = list.value.map((item) => {
-      const status = getStatusObject(id)
+      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
@@ -128,38 +58,112 @@ export function useVirtualScrolling(
 
     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) =>
-      anchor.value
+      toValue(anchorId)
-        ? list.find(({ id }) => id === anchor.value)
+        ? 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)
     }
 
-    updateBoundaries()
     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 itemBottomBoundary = heightChartItem.top + heightChartItem.height
       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
@@ -176,33 +180,39 @@ 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
+      // Bottom value isn't really used otherwise for debugging
       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 {
+        // Reusing previous item if possible
         const previousItem = acc[acc.length - 1]
-        const spacer =
+        const usingPreviousItem = previousItem?.type === 'spacer'
-          previousItem?.type === 'spacer'
+        // We only really care for height and id of spacer, everything else
-            ? previousItem
+        // is just for debugging
-            : {
+        const spacer = usingPreviousItem
-                type: 'spacer',
+          ? previousItem
-                top: Number.POSITIVE_INFINITY,
+          : {
-                bottom: Number.POSITIVE_INFINITY,
+              type: 'spacer',
-                height: 0,
+              top: Number.POSITIVE_INFINITY,
-                ids: new Set(),
+              bottom: Number.POSITIVE_INFINITY,
-              }
+              height: 0,
+              ids: new Set(),
+            }
 
         spacer.ids.add(id)
-        spacer.id = [...spacer.ids].join()
+        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 (previousItem?.type === 'spacer') {
+        // If we used previous item there is no need to push it to array
+        if (usingPreviousItem) {
           return acc
         } else {
           return [...acc, spacer]
@@ -215,5 +225,8 @@ export function useVirtualScrolling(
     heightChart: heightChartGrouped,
     changeSuspendState,
     updateVirtualHeight,
+    pauseWatchers,
+    resumeWatchers,
+    updateBoundaries,
   }
 }