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

src/components/conversation/conversation.js

@@ -192,10 +192,17 @@ export default {
     const lastStatus = computed(
       () => conversation.value[conversation.value.legnth - 1],
     )
-    const getStatusClasses = (status, active) => ({
+    const getStatusClasses = (status, ancestor) => {
-      '-first': status.id === firstStatus.value?.id,
+      const result = {
-      '-last': status.id === lastStatus.value?.id,
+        '-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,
+      anchorIds,
-      anchorRepeatId: currentStatus.value?.id,
       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,

src/components/conversation/conversation.vue

@@ -91,15 +91,14 @@
           ref="ancestors"
           class="thread-ancestors"
         >
-          <article
+          <template
             v-for="element in heightChartAncestors"
-            class="thread-ancestor"
+            :key="element.id"
-            :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)"
+              :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"
-          :key="element.id ?? element.ids"
         >
           <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>

src/components/status/status.js

@@ -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 {

src/components/status/status.vue

@@ -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>

src/composables/useVirtualScrolling.js

@@ -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.
+  // buffer zone, the amount of placeholder heights to include
-  // Omitting it makes last element the anchor
+  buffer,
-  anchorId,
-  anchorRepeatId,
   // 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 =
+      const height = (() => {
-        (() => {
+        if (heights.value.has(id)) {
-          if (heights.value.has(id)) {
+          return heights.value.get(id)
-            return heights.value.get(id)
+        } else {
-          } else {
+          return getPlaceholderHeight(id).value
-            return getPlaceholderHeight(id).value
+        }
-          }
+      })()
-        })() + 1 //including border
       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 expansion = oldVal.length === 0 && newVal.length !== 0
-    const getAnchoredEl = (list) =>
+    const collapse = oldVal.length !== 0 && newVal.length === 0
-      toValue(anchorId)
-        ? list.find(
-            ({ id }) =>
-              id === toValue(anchorId) || id === toValue(anchorRepeatId),
-          )
-        : list[list.length - 1]
-
-    const oldElement = getAnchoredEl(oldVal)
-    const newElement = getAnchoredEl(newVal)
 
     const diff = (() => {
-      if (oldElement && newElement) {
+      if (expansion || collapse) {
-        // Generic shifting
+        if (toValue(collapseMode) === 'height') {
-        const oldOffset = toValue(anchorId)
+          const oldBottomElement = last(oldVal)
-          ? oldElement.top
+          const newBottomElement = last(newVal)
-          : oldElement.top + oldElement.height
+
-        const newOffset = toValue(anchorId)
+          if (expansion) {
-          ? newElement.top
+            return newBottomElement.top + newBottomElement.height
-          : newElement.top + newElement.height
+          } else if (collapse) {
-        return newOffset - oldOffset
+            return 0 - oldBottomElement.top - oldBottomElement.height
-      } else if (!oldElement && newElement) {
+          }
-        // Expansion
+        }
-        return newElement.top + newElement.height
+        return 0
-      } else if (oldElement && !newElement) {
+      } else if (toValue(anchorIds) != null) {
-        // Collapsing
+        const anchorOld = oldVal.find(({ id }) => toValue(anchorIds).has(id))
-        return 0 - oldElement.top - oldElement.height
+        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(
+        return 0
-          "Somehow both new and old elements are missing, this shouldn't happen",
-        )
       }
     })()
 
+    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